Windows 上的 npm run build / deploy 错误

Question

I am trying to compile files with webpack and npm for my reactJS applciation.

When I run npm start, it all goes well. When I run npm run deploy or npm run build it does not work under a windows environment. It does work under a linux environment.

Does someone have an idea why ?

My files :

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;

I get the following error with npm run build

Microsoft Windows [Version 10.0.10586] (c) 2015 Microsoft Corporation. All rights reserved.

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

FoodMeUp@1.0.0 build D:\\Divers\\Programmation\\Web\\foodmeup.dev webpack

D:\\Divers\\Programmation\\Web\\foodmeup.dev Hash: 9cb8c898ada89430aa7c Version: webpack 1.13.1 Time: 3353ms [0] multi main 64 bytes {0} [built] + 739 hidden modules

ERROR in ./app/Resources/react/components/subscription/total.js Module not found: Error: Cannot resolve module 'lodash' in D:\\Divers\\Programmation\\Web\\foodmeup.dev\\app\\Resources\\react\\components\\subscription @ ./app/Resources/react/components/subscription/total.js 19:8-25

my total.js file :

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

...

I get the following error when I launch npm run deploy

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

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

'NODE_ENV' is not recognized as an internal or external command, operable program or batch file.

npm ERR! Windows_NT 10.0.10586 npm ERR! argv "C:\\Development\\nodejs\\node.exe" "C:\\Development\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "run" "deploy" npm ERR! node v6.2.2 npm ERR! npm v3.9.5 npm ERR! code ELIFECYCLE npm ERR! FoodMeUp@1.0.0 deploy: NODE_ENV=production webpack -p --config webpack.production.config.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the FoodMeUp@1.0.0 deploy script 'NODE_ENV=production webpack -p --config webpack.production.config.js'. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the FoodMeUp package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! NODE_ENV=production webpack -p --config webpack.production.config.js npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs FoodMeUp npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls FoodMeUp npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request: npm ERR! D:\\Divers\\Programmation\\Web\\foodmeup.dev\\npm-debug.log

and my 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

It looks like the configuration file is not 100% correct. See details below:

• need to import 'webpack' mobile before using it (webpack.config.js), ie, const webpack = require('webpack');

• need to import path module before using it (webpack.config.js), ie, const path = require('path');

• devFlagPlugin is not defined

• also exclude the node_modules directory in the loader

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

Answer 2

I think you have two different problems.

Lodash is missing?

Now, I'm not an expert in Webpack so somebody may point out something obvious that I don't see...but...when you say it doesn't work under Windows, have you tried it on multiple Windows systems?

If this issue is only on one system or it's a PITA to get onto a second box or whatever, try:

1. Delete the node_modules directory
2. Execute npm cache clean to be sure you'll start fresh when you reinstall
3. Re-install with npm i --verbose > npm-install-log.txt

If the install still doesn't work, you'll have an install log to review to see if something is failing to compile or there's some other wacky error that may not be visible after install.

NODE_ENV on Windows

The NODE_ENV=production <commands> syntax is a *nix thing but not a Windows/DOS thing .

In this case, you may find it easier to create a .bat file for this where you set the variable on the first line and call the command on the second. However, this won't work on *nix platforms so....maybe:

1. Create two scripts and two entries in package.json , one for each OS. If it's a simple project that's mostly maintained by hand, that's probably cool.
2. Create a deploy.js script, executed by node, that sets the NODE_ENV variable, calls webpack via the node api to do the work. This should be OS independent and is a single script...

Answer 3

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

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