Question

我正在尝试使用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 [Version 10.0.10586]（c）2015 Microsoft Corporation。   保留所有权利。

D：\ Divers \ Programmation \ Web \ foodmeup.dev＆gt; npm run build


FoodMeUp@1.0.0 build D：\ Divers \ Programmation \ Web \ foodmeup.dev     的WebPack


D：\ Divers \ Programmation \ Web \ foodmeup.dev哈希：9cb8c898ada89430aa7c   版本：webpack 1.13.1时间：3353ms [0]多主64字节{0}   [建设]       + 739个隐藏模块
      ./app/Resources/react/components/subscription/total.js模块中的错误   找不到：错误：无法解析模块'lodash'   d：\潜水\ Programmation \网络\ foodmeup.dev \程序\资源\反应\分量\订阅   @ ./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＆gt; npm run deploy

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


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

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

npm ERR！请在任何支持请求中包含以下文件：   错误的ERR！ d：\潜水员\ Programmation \网络\ 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 ]

Answer 1

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

Lodash失踪？

现在，我不是Webpack的专家，所以有人可能会指出一些我不明白的东西......但......当你说它不能在Windows下工作时，你在多个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来完成工作。这个应该独立于操作系统并且是一个单独的脚本......

Answer 2

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

需要导入＆＃39; webpack＆＃39;使用它之前移动（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/')
        }
    ]
}

npm在Windows

2 个答案: