本文來(lái)自pilishen.com----原文鏈接; 歡迎作客我們的php&Laravel學(xué)習(xí)群：109256050
《Npm Debug Series》是我們課程laravel實(shí)戰(zhàn)實(shí)戰(zhàn)系列課程的擴(kuò)展閱讀篇，雖然視頻中我們已經(jīng)將npm install過(guò)程中的常見(jiàn)問(wèn)題及解決方案都說(shuō)了，但是鑒于npm的問(wèn)題相對(duì)頻繁，有隨時(shí)查閱之需，故有此系列文章。

最近很多小伙伴在使用最新的laravel5.4來(lái)學(xué)習(xí)我們的laravel實(shí)戰(zhàn)優(yōu)雅入門(mén)：任務(wù)管理系統(tǒng)（一），在進(jìn)行到第14節(jié)前端資源的管理與調(diào)用（elixir）時(shí)，當(dāng)執(zhí)行了npm run dev命令來(lái)編譯前端資源時(shí)，經(jīng)常會(huì)遇到一個(gè)報(bào)錯(cuò)，類(lèi)似這樣：

> Code@1.0.0 dev /home/vagrant/Code
> cross-env NODE_ENV=development webpack --progress --hide-modules

sh: 1: cross-env: not found

npm ERR! Linux 4.4.0-51-generic
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v7.8.0
npm ERR! npm  v4.2.0
npm ERR! file sh
npm ERR! code ELIFECYCLE
npm ERR! errno ENOENT
npm ERR! syscall spawn
npm ERR! Code@1.0.0 dev: `cross-env NODE_ENV=development webpack --progress --hide-modules`
npm ERR! spawn ENOENT

或者說(shuō)：

npm ERR! Failed at the @ dev script "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js".

可能你具體的錯(cuò)誤提示還稍有差異，不過(guò)這里先不管它，重點(diǎn)在于問(wèn)題是出在cross-env這個(gè)組件上。

Most Windows command prompts will choke when you set environment variables with NODE_ENV=production like that. (The exception is Bash on Windows, which uses native Bash.) Similarly, there"s a difference in how windows and POSIX commands utilize environment variables. With POSIX, you use: $ENV_VAR and on windows you use %ENV_VAR%.

好吧，又是微軟Windows的鍋~也即是我們?cè)趙indows系統(tǒng)上使用NODE_ENV=production這樣的方式來(lái)設(shè)置node環(huán)境時(shí)，因?yàn)閣indows的系統(tǒng)變量是%ENV_VAR%這種格式，而“行業(yè)標(biāo)準(zhǔn)”是$ENV_VAR這樣的，當(dāng)然windows上的bash例外。

那么為了解決這個(gè)跨平臺(tái)環(huán)境變量的問(wèn)題，就有了cross-env這個(gè)組件。知道這些個(gè)有啥用呢？

用處是，cross-env只是用在windows系統(tǒng)上的，在Mac和Linux系統(tǒng)上沒(méi)用，不需要裝，裝了反而會(huì)壞事兒~

所以從這一點(diǎn)上，你的問(wèn)題其實(shí)有兩種可能：

你的項(xiàng)目環(huán)境是Windows系統(tǒng)，你沒(méi)有裝cross-env,或者說(shuō)因?yàn)槁窂降绕渌蛘{(diào)用不到它。

你的項(xiàng)目環(huán)境是Linux或Mac，這個(gè)時(shí)候你沒(méi)必要裝cross-env，但是你卻裝了，或者說(shuō)laravel默認(rèn)帶了，而且裝就裝吧，路徑調(diào)用往往還有錯(cuò)

這里特別的是，如果你是用的Homestead開(kāi)發(fā)環(huán)境，因?yàn)槟闾摂M機(jī)里是Linux，所以如果你在Host主機(jī)上去操作，那你就是Windows環(huán)境，如果你vagrant ssh進(jìn)了虛擬機(jī)操作，那么就是Linux環(huán)境；

所以解決辦法也要基于你的項(xiàng)目開(kāi)發(fā)環(huán)境：

你要做的，只是將你的package.json文件中的cross-env刪掉即可：

"dev": "node  NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "node NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

首先你需要裝一下cross-env，執(zhí)行：

npm install --save-dev cross-env  --no-bin-links

或者你也可以全局安裝一下cross-env，以防止以后在其他項(xiàng)目也出現(xiàn)類(lèi)似錯(cuò)誤：

npm install -g cross-env  --no-bin-links

將package.json文件中的cross-env調(diào)用換成具體路徑node_modules/cross-env/dist/bin/cross-env.js，最終類(lèi)似這樣：

"dev": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"

保險(xiǎn)起見(jiàn)，再執(zhí)行一下npm install --no-bin-links

然后再去執(zhí)行npm run dev來(lái)試試

因?yàn)橐恢钡絣aravel 5.4.15，laravel的package.json是這樣的：

{
  "private": true,
  "scripts": {
    "dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.8.1",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

可以看到它的devDependencies里沒(méi)有依賴(lài)cross-env,但是在上方聲明了cross-env的路徑：node_modules/cross-env/bin/cross-env.js，因?yàn)?b>laravel-mix這個(gè)組件里用到了cross-env。但是沒(méi)多久，cross-env的作者對(duì)組件路徑做了更改，將cross-env/bin換成了cross-env/dist,于是在這個(gè)laravel commit里，package.json文件里更改了cross-env的路徑，同時(shí)"devDependencies"里加上了"cross-env": "^3.2.3"，然后沒(méi)幾天，作者們意識(shí)到既然依賴(lài)了cross-env，就沒(méi)必要上面寫(xiě)具體路徑了，所以在這個(gè)laravel commit里，package.json文件變成這樣：

{
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "watch-poll": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --watch-poll --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
    "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
    "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
  },
  "devDependencies": {
    "axios": "^0.15.3",
    "bootstrap-sass": "^3.3.7",
    "cross-env": "^3.2.3",
    "jquery": "^3.1.1",
    "laravel-mix": "^0.8.1",
    "lodash": "^4.17.4",
    "vue": "^2.1.10"
  }
}

這期間呢，laravel-mix的作者Jeffway看到laravel里依賴(lài)了cross-env，所以他就在laravel-mix里直接取消了對(duì)cross-env的依賴(lài)，因?yàn)闆](méi)必要重復(fù)安裝，這直接導(dǎo)致了一系列問(wèn)題的發(fā)生。而且這期間，laravel里對(duì)cross-env的依賴(lài)一直停留在"cross-env": "^3.2.3",直到5.4.30，才突然變成"cross-env": "^5.0.1".

所以呢，取決于你所使用的laravel和laravel-mix的版本，可能是你package.json里沒(méi)有cross-env而報(bào)錯(cuò)，也可能是路徑變了以后沒(méi)更新，也可能是laravel調(diào)用的版本一直太低，因?yàn)檫@期間你可能執(zhí)行了`composer update`或`npm update`這些命令而導(dǎo)致兩者的小版本都發(fā)生變化，所以說(shuō)不清道不明的問(wèn)題就發(fā)生了。