【发布时间】：2018-12-04 19:40:35
【问题描述】：
我的应用程序一直运行良好，直到上周我开始像往常一样以开发模式（webpack 热开发）运行它；它开始扫描从未更改过的文件并不断重新加载项目。最近，情况变得更糟——开始爬入我的node_modules 文件夹并按每个文件重新加载，最终崩溃。
直到最近才发生过这种情况，我不知道是什么原因导致它突然出现这种行为。
命令提示符日志
[1] ???? Initial data loaded, starting server...
[1] ----
[1] ==> ✅ Portal is running, talking to API server at http://localhost:3335.
[1] ==> ???? Open http://localhost:3000 in a browser to view the app.
[0] webpack building...
[1] [piping] File src\constants.js has changed, reloading.
[1] [piping] File src\components\Dialog\Dialog.js has changed, reloading.
[1] internal/process.js:183
[1] throw util._errnoException(err, 'kill');
[1] ^
[1]
[1] Error: kill ESRCH
[1] at Object._errnoException (util.js:1024:11)
[1] at process.kill (internal/process.js:183:18)
[1] at FSWatcher.<anonymous> (C:\Users\user\Documents\portal\node_modules\piping\lib\piping.js:87:19)
[1] at emitTwo (events.js:126:13)
[1] at FSWatcher.emit (events.js:214:7)
[1] at FSWatcher.<anonymous> (C:\Users\user\Documents\portal\node_modules\chokidar\index.js:196:15)
[1] at FSWatcher._emit (C:\Users\user\Documents\portal\node_modules\chokidar\index.js:238:5)
[1] at FSWatcher.<anonymous> (C:\Users\user\Documents\portal\node_modules\chokidar\lib\nodefs-handler.js:263:16)
[1] at FSReqWrap.oncomplete (fs.js:153:5)
[1] npm ERR! code ELIFECYCLE
[1] npm ERR! errno 1
[1] npm ERR! portal@0.1.0 start-dev: `better-npm-run start-dev`
[1] npm ERR! Exit status 1
[1] npm ERR!
[1] npm ERR! Failed at the portal@0.1.0 start-dev script.
[1] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[1]
[1] npm ERR! A complete log of this run can be found in:
[1] npm ERR! C:\Users\mok\AppData\Roaming\npm-cache\_logs\2018-06-21T01_10_39_440Z-debug.log
[1] npm run start-dev exited with code 1
--> Sending SIGTERM to other processes..
[2] gulp watch --gulpfile semantic/gulpfile.js exited with code 1
[0] npm ERR! code ELIFECYCLE
[0] npm ERR! errno 1
[0] npm ERR! portal@0.1.0 watch-client: `better-npm-run watch-client`
[0] npm ERR! Exit status 1
[0] npm ERR!
[0] npm ERR! Failed at the portal@0.1.0 watch-client script.
[0] npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
[0] npm run watch-client exited with code 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! portal@0.1.0 dev: `concurrently --kill-others "npm run watch-client" "npm run start-dev" "gulp watch --gulpfile semantic/gulpfile.js"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the portal@0.1.0 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\user\AppData\Roaming\npm-cache\_logs\2018-06-21T01_10_40_197Z-debug.log
在 GitHub 上阅读了一些相关问题后
- https://github.com/mdlawson/piping/issues/10
- https://github.com/nodejs/node/issues/4852
- https://github.com/erikras/react-redux-universal-hot-example/issues/638
我意识到将piping 模块版本更新到^1.0.0-rc.1 或更高版本应该解决问题。
TL;DR
但是，第二天我再次运行它，它又开始向我显示类似的行为，但它并没有在启动时使我的命令提示符崩溃，更糟糕的是：当我开始更改代码或文件时，它会消失进入我的node_modules 并重新加载十或百次：
命令提示日志（当我更改文件时）
[0] webpack built e36ced9f06f9f77a7631 in 1203ms
[0] webpack building...
[1] [piping] File node_modules\react-dom\lib\ReactDOM.js has changed, reloading.
[1] [piping] File node_modules\react-dom\lib\ReactDOMFeatureFlags.js has changed, reloading.
[1] [piping] File node_modules\lodash\_parent.js has changed, reloading.
[1] [piping] File node_modules\lodash\flatten.js has changed, reloading.
[1] [piping] File node_modules\lodash\now.js has changed, reloading.
[1] [piping] File node_modules\lodash\_basePickBy.js has changed, reloading.
[1] [piping] File node_modules\lodash\_asciiSize.js has changed, reloading.
[1] [piping] File node_modules\lodash\_unicodeSize.js has changed, reloading.
[1] [piping] File node_modules\lodash\_arrayAggregator.js has changed, reloading.
[1] [piping] File node_modules\lodash\_baseAggregator.js has changed, reloading.
// more
命令提示日志（以开发模式启动时）
[1] Executing script: start-dev
[1]
[0] Executing script: watch-client
[0]
[1] to be executed: "node ./bin/server.js"
[0] to be executed: "node webpack/webpack-dev-server.js"
[2] [15:24:29] Working directory changed to ~\Documents\portal\semantic
[1] [piping] File node_modules\core-js\library\modules\web.immediate.js has changed, reloading.
[0] ==> ???? Webpack development server listening on port 3001
[1] [piping] File node_modules\babel-plugin-transform-es2015-classes\lib\loose.js has changed, reloading.
[1] [piping] File node_modules\babel-helper-remap-async-to-generator\lib\for-await.js has changed, reloading.
[1] [piping] File node_modules\react\lib\React.js has changed, reloading.
[2] [15:24:45] Using gulpfile ~\Documents\htm-owner-portal\semantic\gulpfile.js
[2] [15:24:45] Starting 'watch'...
[2] Watching source files for changes
[1] [piping] File node_modules\react-dom\lib\ReactComponentBrowserEnvironment.js has changed, reloading.
[1] [piping] File node_modules\react-dom\lib\getEventCharCode.js has changed, reloading.
[1] [piping] File node_modules\lodash\_arrayMap.js has changed, reloading.
[1] [piping] File bin\server.js has changed, reloading.
[1] [piping] File node_modules\webpack-isomorphic-tools\babel-transpiled-modules\tools\log.js has changed, reloading.
[1] [piping] File node_modules\react\lib\React.js has changed, reloading.
[1] [piping] File node_modules\htmlparser2\lib\Parser.js has changed, reloading.
[1] [piping] File node_modules\domutils\lib\traversal.js has changed, reloading.
[1] [piping] File node_modules\react-router\lib\PromiseUtils.js has changed, reloading.
[1] [piping] File node_modules\redux-actions\lib\handleActions.js has changed, reloading.
[1] [piping] File node_modules\formidable\lib\multipart_parser.js has changed, reloading.
[1] [piping] File node_modules\semantic-ui-react\dist\commonjs\lib\classNameBuilders.js has changed, reloading.
[1] [piping] File node_modules\semantic-ui-react\dist\commonjs\elements\Label\LabelDetail.js has changed, reloading.
[1] [piping] File node_modules\lodash\_baseInRange.js has changed, reloading.
[1] [piping] File node_modules\airbnb-prop-types\build\componentWithName.js has changed, reloading.
这是我的piping 模块版本（如果您需要更多信息，请告诉我）：
npm-shrinkwrap.json
"piping": {
"version": "1.0.0-rc.4",
"resolved": "https://registry.npmjs.org/piping/-/piping-1.0.0-rc.4.tgz",
"integrity": "sha1-d1oUz2UapC7ltKrKs1SMUXShXw=",
"requires": {
"chokidar": "1.7.0",
"colors": "1.1.2",
"lodash": "4.17.10"
}
}
package.json
"piping": "^1.0.0-rc.4",
webpack 开发配置
require('babel-polyfill');
// Webpack config for development
var fs = require('fs');
var path = require('path');
var webpack = require('webpack');
var assetsPath = path.resolve(__dirname, '../static/dist');
var host = (process.env.HOST || 'localhost');
var port = (+process.env.PORT + 1) || 3001;
// https://github.com/halt-hammerzeit/webpack-isomorphic-tools
var WebpackIsomorphicToolsPlugin = require('webpack-isomorphic-tools/plugin');
var webpackIsomorphicToolsPlugin = new WebpackIsomorphicToolsPlugin(require('./webpack-isomorphic-tools'));
var babelrc = fs.readFileSync('./.babelrc');
var babelrcObject = {};
try {
babelrcObject = JSON.parse(babelrc);
} catch (err) {
console.error('==> ERROR: Error parsing your .babelrc.');
console.error(err);
}
var babelrcObjectDevelopment = babelrcObject.env && babelrcObject.env.development || {};
// merge global and dev-only plugins
var combinedPlugins = babelrcObject.plugins || [];
combinedPlugins = combinedPlugins.concat(babelrcObjectDevelopment.plugins);
var babelLoaderQuery = Object.assign({}, babelrcObjectDevelopment, babelrcObject, {plugins: combinedPlugins});
delete babelLoaderQuery.env;
// Since we use .babelrc for client and server, and we don't want HMR enabled on the server, we have to add
// the babel plugin react-transform-hmr manually here.
// make sure react-transform is enabled
babelLoaderQuery.plugins = babelLoaderQuery.plugins || [];
var reactTransform = null;
for (var i = 0; i < babelLoaderQuery.plugins.length; ++i) {
var plugin = babelLoaderQuery.plugins[i];
if (Array.isArray(plugin) && plugin[0] === 'react-transform') {
reactTransform = plugin;
}
}
if (!reactTransform) {
reactTransform = ['react-transform', {transforms: []}];
babelLoaderQuery.plugins.push(reactTransform);
}
if (!reactTransform[1] || !reactTransform[1].transforms) {
reactTransform[1] = Object.assign({}, reactTransform[1], {transforms: []});
}
// make sure react-transform-hmr is enabled
reactTransform[1].transforms.push({
transform: 'react-transform-hmr',
imports: ['react'],
locals: ['module']
});
module.exports = {
devtool: 'inline-source-map',
context: path.resolve(__dirname, '..'),
entry: {
'main': [
'webpack-hot-middleware/client?path=http://' + host + ':' + port + '/__webpack_hmr',
'font-awesome-webpack!./src/theme/font-awesome.config.js',
'./src/client.js'
]
},
output: {
path: assetsPath,
filename: '[name]-[hash].js',
chunkFilename: '[name]-[chunkhash].js',
publicPath: 'http://' + host + ':' + port + '/dist/'
},
module: {
loaders: [
{ test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel?' + JSON.stringify(babelLoaderQuery), 'eslint-loader']},
{ test: /\.json$/, loader: 'json-loader' },
{ test: /\.css/, loader: 'style!css?importLoaders=1&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version' },
{ test: /\.less$/, loader: 'style!css?modules&importLoaders=2&sourceMap&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap' },
{ test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff" },
{ test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream" },
{ test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file" },
{ test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=image/svg+xml" },
{ test: webpackIsomorphicToolsPlugin.regular_expression('images'), loader: 'url-loader?limit=10240' }
]
},
progress: true,
resolve: {
modulesDirectories: [
'src',
'node_modules'
],
extensions: ['', '.json', '.js', '.jsx']
},
plugins: [
// hot reload
new webpack.HotModuleReplacementPlugin(),
new webpack.IgnorePlugin(/webpack-stats\.json$/),
new webpack.DefinePlugin({
__CLIENT__: true,
__SERVER__: false,
__DEVELOPMENT__: true,
__DEVTOOLS__: true
}),
webpackIsomorphicToolsPlugin.development()
]
};
其他人正面临这个问题，或者任何人知道如何解决这个问题？
感谢任何帮助
【问题讨论】：
-
请至少提供您的 webpack 配置和 gulpfile，最好在某处提供重现错误的最小示例 repo。
-
刚刚添加了webpack配置代码，希望对你有帮助！我认为我无法重现此错误，我目前在 3 人的开发团队中工作，到目前为止，我们中只有 2 人遇到此错误（首先是我，然后是其他开发人员），而其他开发人员仍然工作正常；而且这种行为也蔓延到我使用相同配置的其他项目，所以我真的不知道是节点还是计算机还是代码有问题。
-
webpack 在哪里以及为什么使用管道？我假设，所有开发人员都运行完全相同的
node、npm版本，并与您共享相同的 repo/branch，并且您运行了rimraf node_modules package-lock.json && npm i，因此请确保它没有缓存问题 -
但是，我们非常感谢 MWE。另外：尝试获取一个 vm，全新安装
node和 repo，看看问题是否仍然存在。如果是，则问题出在外部（库、节点、代码），如果否，则说明您（和您的同事）环境存在问题。顺便说一句：通常如果我尝试创建一个 MWE，它会起作用，并且问题是由一些注入的东西引起的 -
@Joel 我猜
rimraf node_modules package-lock.json相当于rm -rf node_modules package-lock.json？我会尝试运行它并让您知道它是否解决了问题。顺便说一句，MWE 是什么？
标签： node.js reactjs webpack pipe