Windows 上的 npm 运行构建/部署错误答案

【问题标题】：npm run build / deploy error on windowsWindows 上的 npm 运行构建/部署错误
【发布时间】：2016-11-01 16:26:35
【问题描述】：

我正在尝试使用 webpack 和 npm 为我的 reactJS 应用程序编译文件。

当我运行 npm start 时，一切顺利。当我运行 npm run deploy 或 npm run build 时，它在 Windows 环境下不起作用。它确实可以在 linux 环境下工作。

有人知道为什么吗？

我的文件：

package.json

{
  "license": "UNLICENSED",
  "private": true,
  "version": "1.0.0",
  "webPath": "web/",
  "nodePath": "node_modules/",
  "devDependencies": {
    "autoprefixer": "^6.3.1",
    "exports-loader": "^0.6.2",
    "grunt": "^0.4.5",
    "grunt-autoprefixer": "^3.0.3",
    "grunt-contrib-concat": "^0.5.1",
    "grunt-contrib-cssmin": "^0.14.0",
    "grunt-contrib-less": "^1.1.0",
    "grunt-contrib-uglify": "^0.11.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-css-url-rewrite": "^0.3.5",
    "grunt-cssjoin": "^0.3.0",
    "grunt-postcss": "^0.7.1",
    "imports-loader": "^0.6.5",
    "matchdep": "^1.0.0",
    "redux-devtools": "^3.0.2",
    "redux-devtools-dock-monitor": "^1.0.1",
    "redux-devtools-log-monitor": "^1.0.4",
    "webpack-shell-plugin": "^0.4.2"
  },
  "repository": {
    "type": "git",
    "url": ""
  },
  "dependencies": {
    "babel-core": "^6.4.0",
    "babel-loader": "^6.2.1",
    "babel-plugin-transform-runtime": "^6.4.3",
    "babel-polyfill": "^6.3.14",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "babel-runtime": "^6.3.19",
    "grunt-postcss": "^0.7.1",
    "history": "^1.17.0",
    "i18next": "^2.5.1",
    "isomorphic-fetch": "^2.2.1",
    "lodash": "^4.11.1",
    "radium": "^0.16.2",
    "rc-switch": "^1.4.2",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-hot-loader": "^1.3.0",
    "react-redux": "^4.1.2",
    "react-router": "^1.0.3",
    "react-router-redux": "^3.0.0",
    "redux": "^3.1.6",
    "redux-thunk": "^2.1.0",
    "selfupdate": "^1.1.0",
    "webpack": "^1.12.11",
    "webpack-dev-server": "^1.14.1",
    "whatwg-fetch": "^0.11.0"
  },
  "scripts": {
    "start": "node webpack.dev-server.js",
    "build": "webpack",
    "deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js"
  }
}

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.join(__dirname, 'node_modules');

var devFlagPlugin = new webpack.DefinePlugin({
    __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
});

console.log(__dirname);

var config = {
    entry: [
        'babel-polyfill',
        'webpack-dev-server/client?http://127.0.0.1:3000',
        'webpack/hot/only-dev-server',
        './app/Resources/react/app.js'
    ],
    output: {
        path: path.join(__dirname, 'web/js'),
        filename: 'bundle.js',
        publicPath: 'http://127.0.0.1:3000/static/'
    },
    debug: true,
    devtool: 'eval',
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin(),
        devFlagPlugin
    ],
    module: {
        loaders: [
            {
                loaders: ["react-hot","babel-loader?plugins=transform-runtime&presets[]=es2015&presets[]=stage-0&presets[]=react"],
                test: /\.js$/,
                include: path.join(__dirname, 'app/Resources/react')
            }
        ]
    }
};

module.exports = config;
/*
 new webpack.ProvidePlugin({
 'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
 })
 */

webpack.dev-server.js

var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
    publicPath: config.output.publicPath,
    hot: true,
    historyApiFallback: true,
    quiet: false,
    noInfo: false,
    contentBase: "./assets"
}).listen(3000, 'localhost', function (err, result) {
    if (err) {
        console.log(err);
    }
    console.log('Listening at localhost:3000');
});

webpack.production.config.js

var path = require('path');
var node_modules_dir = path.resolve(__dirname, 'node_modules');

var config = {
    entry: [
        'babel-polyfill',
        './app/Resources/react/app.js'
    ],
    debug: false,
    output: {
        path: path.join(__dirname, 'web/js'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                loaders: ["babel-loader?plugins=transform-runtime&presets[]=es2015&presets[]=stage-0&presets[]=react"],
                test: /\.js$/,
                include: path.join(__dirname, 'app/Resources/react')
            }
        ]
    },
    plugins: []
};

module.exports = config;

我在使用 npm run build 时收到以下错误

Microsoft Windows [版本 10.0.10586] (c) 2015 Microsoft Corporation。保留所有权利。

D:\Divers\Programmation\Web\foodmeup.dev>npm 运行构建

FoodMeUp@1.0.0 构建 D:\Divers\Programmation\Web\foodmeup.dev 网页包

D:\Divers\Programmation\Web\foodmeup.dev 哈希：9cb8c898ada89430aa7c 版本：webpack 1.13.1 时间：3353ms [0] multi main 64 bytes {0} [建成] + 739 个隐藏模块

./app/Resources/react/components/subscription/total.js 模块中的错误未找到：错误：无法解析模块“lodash” D:\Divers\Programmation\Web\foodmeup.dev\app\Resources\react\components\subscription @ ./app/Resources/react/components/subscription/total.js 19:8-25

我的 total.js 文件：

import React from 'react';
import { connect } from 'react-redux';
import { updateSubscription } from '../../actions/subscription';
var _ = require('lodash');

...

我在启动 npm run deploy 时收到以下错误

D:\Divers\Programmation\Web\foodmeup.dev>npm run deploy

FoodMeUp@1.0.0 部署 D:\Divers\Programmation\Web\foodmeup.dev NODE_ENV=production webpack -p --config webpack.production.config.js

'NODE_ENV' 未被识别为内部或外部命令，可运行的程序或批处理文件。

npm 错误！ Windows_NT 10.0.10586 npm 错误！ argv “C:\开发\nodejs\node.exe” "C:\开发\nodejs\node_modules\npm\bin\npm-cli.js" "运行" “部署” npm ERR！节点 v6.2.2 npm 错误！ npm v3.9.5 npm 错误！代码生命周期 npm 错误！ FoodMeUp@1.0.0 部署：NODE_ENV=production webpack -p --config webpack.production.config.js npm ERR！退出状态 1 npm 错误！ npm 错误！ FoodMeUp@1.0.0 部署脚本失败 'NODE_ENV=生产 webpack -p --config webpack.production.config.js'。 npm 错误！确保您拥有最新的安装了 node.js 和 npm 的版本。 npm 错误！如果你这样做，这是最可能是 FoodMeUp 包的问题，npm ERR！不使用 npm 本身。 npm 错误！告诉作者这在您的系统上失败：npm 呃！ NODE_ENV=生产 webpack -p --config webpack.production.config.js npm 错误！您可以获得有关如何为这个项目打开一个问题：npm ERR！ npm 错误 FoodMeUp npm 错误！或者，如果这不可用，您可以通过以下方式获取他们的信息：npm 呃！ npm 所有者 ls FoodMeUp npm 错误！可能还有额外的上面的日志输出。

npm 错误！请在任何支持请求中包含以下文件： npm 错误！ D:\Divers\Programmation\Web\foodmeup.dev\npm-debug.log

还有我的 npm-debug.log

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Development\\nodejs\\node.exe',
1 verbose cli   'C:\\Development\\nodejs\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'deploy' ]
2 info using npm@3.9.5
3 info using node@v6.2.2
4 verbose run-script [ 'predeploy', 'deploy', 'postdeploy' ]
5 info lifecycle FoodMeUp@1.0.0~predeploy: FoodMeUp@1.0.0
6 silly lifecycle FoodMeUp@1.0.0~predeploy: no script for predeploy, continuing
7 info lifecycle FoodMeUp@1.0.0~deploy: FoodMeUp@1.0.0
8 verbose lifecycle FoodMeUp@1.0.0~deploy: unsafe-perm in lifecycle true
9 verbose lifecycle FoodMeUp@1.0.0~deploy: PATH: C:\Development\nodejs\node_modules\npm\bin\node-gyp-bin;D:\Divers\Programmation\Web\foodmeup.dev\node_modules\.bin;C:\Development\nodejs;C:\img;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Development\Git\cmd;C:\Program Files (x86)\Windows Live\Shared;C:\Development\wamp\bin\php\php7.0.0;C:\Net Generation\FireFox\;C:\Development\wamp\bin\mysql\mysql5.7.9\bin;C:\Program Files (x86)\Skype\Phone\;D:\Divers\Programmation\Web\foodmeup.dev\node_modules\typescript\bin;C:\Development\nodejs\;C:\Development\ruby\bin;C:\Development\wamp\bin\php\php7.0.0;C:\Development\wamp\bin\mysql\mysql5.7.9\bin;D:\Divers\Programmation\Web\foodmeup.dev\node_modules\typescript\bin;C:\img;C:\Users\Sébastien\AppData\Roaming\npm
10 verbose lifecycle FoodMeUp@1.0.0~deploy: CWD: D:\Divers\Programmation\Web\foodmeup.dev
11 silly lifecycle FoodMeUp@1.0.0~deploy: Args: [ '/d /s /c',
11 silly lifecycle   'NODE_ENV=production webpack -p --config webpack.production.config.js' ]
12 silly lifecycle FoodMeUp@1.0.0~deploy: Returned: code: 1  signal: null
13 info lifecycle FoodMeUp@1.0.0~deploy: Failed to exec deploy script
14 verbose stack Error: FoodMeUp@1.0.0 deploy: `NODE_ENV=production webpack -p --config webpack.production.config.js`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (C:\Development\nodejs\node_modules\npm\lib\utils\lifecycle.js:245:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (C:\Development\nodejs\node_modules\npm\lib\utils\spawn.js:24:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:852:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
15 verbose pkgid FoodMeUp@1.0.0
16 verbose cwd D:\Divers\Programmation\Web\foodmeup.dev
17 error Windows_NT 10.0.10586
18 error argv "C:\\Development\\nodejs\\node.exe" "C:\\Development\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "deploy"
19 error node v6.2.2
20 error npm  v3.9.5
21 error code ELIFECYCLE
22 error FoodMeUp@1.0.0 deploy: `NODE_ENV=production webpack -p --config webpack.production.config.js`
22 error Exit status 1
23 error Failed at the FoodMeUp@1.0.0 deploy script 'NODE_ENV=production webpack -p --config webpack.production.config.js'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the FoodMeUp package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     NODE_ENV=production webpack -p --config webpack.production.config.js
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs FoodMeUp
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls FoodMeUp
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

【问题讨论】：

标签： node.js windows reactjs npm webpack

【解决方案1】：

看起来配置文件不是 100% 正确的。请参阅下面的详细信息：

使用前需要导入“webpack”移动端（webpack.config.js），即const webpack = require('webpack');
使用前需要导入path模块（webpack.config.js），即const path = require('path');
devFlagPlugin 未定义

同时排除加载器中的node_modules目录

module: {
    loaders: [
        {
            ....
            exclude: path.resolve(__dirname, 'node_modules/')
        }
    ]
}

【讨论】：

【解决方案2】：

我认为你有两个不同的问题。

Lodash 不见了？

现在，我不是 Webpack 方面的专家，所以有人可能会指出一些我看不到的明显的东西......但是......当你说它在 Windows 下不起作用时，你有没有在多个上尝试过视窗系统？

如果这个问题只出现在一个系统上，或者它是一个 PITA 进入第二个盒子或其他任何东西，请尝试：

删除node_modules目录
执行 npm cache clean 以确保您在重新安装时重新开始
用npm i --verbose > npm-install-log.txt重新安装

如果安装仍然不起作用，您将查看安装日志以查看是否有编译失败或安装后可能不可见的其他古怪错误。

Windows 上的 NODE_ENV

NODE_ENV=production <commands> 语法是 *nix 的东西，但 not a Windows/DOS thing。

在这种情况下，您可能会发现为此创建一个.bat 文件更容易，您可以在第一行设置变量并在第二行调用命令。但是，这在 *nix 平台上不起作用，所以....也许：

在package.json 中创建两个脚本和两个条目，每个操作系统一个。如果这是一个主要由手工维护的简单项目，那可能很酷。
创建一个deploy.js 脚本，由节点执行，设置NODE_ENV 变量，通过node api 调用webpack 来完成这项工作。这应该独立于操作系统并且是单个脚本...

【讨论】：

【解决方案3】：

可以使用cross-env跨平台设置环境变量：

"deploy": "cross-env NODE_ENV=production webpack -p --config webpack.production.config.js"

【讨论】：