摘要：今天有開發(fā)的同事問我說，在本機開發(fā)的上運行構(gòu)建命令報錯，不知道怎么回事兒。比如我們直接在命令行下執(zhí)行都是沒問題的，但結(jié)合到上，卻運行失敗。

今天有開發(fā)的同事問我說，在本機開發(fā)的 windows 上運行構(gòu)建命令報錯，不知道怎么回事兒。
作為一名 Mac 用戶，當然也不知道為什么啦，過去看看，果然有錯誤。

我們的開發(fā)構(gòu)建命令是基于 npm 的 scripts，其實就是很簡單的一句話：

{
  "scripts": {
    ...
    "build": "NODE_ENV=production webpack --progress --hide-modules"
  },
  ...
}

這個命令在 Mac 下沒有問題，在 windows 下運行卻報如下錯誤：

0 info it worked if it ends with ok
1 verbose cli [ "C:Program Files
odejs
ode.exe",
1 verbose cli   "C:Program Files
odejs
ode_modules
pmin
pm-cli.js",
1 verbose cli   "run",
1 verbose cli   "build" ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ "prebuild", "build", "postbuild" ]
5 info lifecycle @~prebuild: @
6 silly lifecycle @~prebuild: no script for prebuild, continuing
7 info lifecycle @~build: @
8 verbose lifecycle @~build: unsafe-perm in lifecycle true
9 verbose lifecycle @~build: PATH: C:Program Files
odejs
ode_modules
pmin
ode-gyp-bin;
ode_modules.bin;C:Usersin;F:Gitmingw64in;F:Gitusrlocalin;F:Gitusrin;F:Gitusrin;F:Gitmingw64in;F:Gitusrin;C:Usersin;C:Windowssystem32;C:Windows;C:WindowsSystem32Wbem;C:WindowsSystem32WindowsPowerShellv1.0;C:Program Files (x86)NVIDIA CorporationPhysXCommon;C:Program Files
odejs;C:Goin;C:UsersAppDataLocalMicrosoftWindowsApps;C:UsersAppDataRoaming
pm;F:Gitusrinvendor_perl;F:Gitusrincore_perl
10 verbose lifecycle @~build: CWD: 
11 silly lifecycle @~build: Args: [ "/d /s /c",
11 silly lifecycle   "NODE_ENV=production webpack --progress --hide-modules" ]
12 silly lifecycle @~build: Returned: code: 1  signal: null
13 info lifecycle @~build: Failed to exec build script
14 verbose stack Error: @ build: `NODE_ENV=production webpack --progress --hide-modules`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter. (C:Program Files
odejs
ode_modules
pmlibutilslifecycle.js:255: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. (C:Program Files
odejs
ode_modules
pmlibutilsspawn.js:40: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:877:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid @
16 verbose cwd 
17 error Windows_NT 10.0.14393
18 error argv "C:Program Files
odejs
ode.exe" "C:Program Files
odejs
ode_modules
pmin
pm-cli.js" "run" "build"
19 error node v6.9.1
20 error npm  v3.10.8
21 error code ELIFECYCLE
22 error @ build: `NODE_ENV=production webpack --progress --hide-modules`
22 error Exit status 1
23 error Failed at the @ build script "NODE_ENV=production webpack --progress --hide-modules".
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  package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     NODE_ENV=production webpack --progress --hide-modules
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs
23 error Or if that isn"t available, you can get their info via:
23 error     npm owner ls
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

調(diào)試了一下，問題就出在這個命令本身。

這位同學(xué)開發(fā)用的是 git-shell 自帶的命令行，本身是支持 linux 命令執(zhí)行的。
比如我們直接在命令行下執(zhí)行：

NODE_ENV=production
export NODE_ENV=production

都是沒問題的，但結(jié)合到 npm scripts 上，卻運行失敗。
當我們?nèi)サ暨@個 env 設(shè)定，再次執(zhí)行 npm scripts 命令：

{
  "scripts": {
    ...
    "build": "webpack --progress --hide-modules"
  },
  ...
}

就會發(fā)現(xiàn)沒問題了，但結(jié)果當然是不是我們想要的。

怎么辦？

可以把要執(zhí)行的代碼寫到獨立的 JS 中，使用 node 命令來運行，比如：

{
  "scripts": {
    ...
    "build": "node build/build.js"
  },
  ...
}

在 build/build.js 文件中，再設(shè)定執(zhí)行環(huán)境之類的：

var ora = require("ora")
var webpack = require("webpack")
var webpackConfig = require("../webpack.config.js")

process.env.NODE_ENV = "production"

var spinner = ora("building for production...")
spinner.start()

webpack(webpackConfig, function (err, stats) {
  spinner.stop()
  if (err) throw err
  process.stdout.write(stats.toString({
    colors: true,
    modules: false,
    children: false,
    chunks: false,
    chunkModules: false
  }) + "
")
})

這其實也是 vue 腳手架自動生成的構(gòu)建方式，果然還是最佳實踐靠譜一點。