Laravel 5.4 Mix執行 npm run dev時報錯，提示cross-env找不到（not found）的緣由及解決辦法

本文來自pilishen.com----原文連接; 歡迎做客咱們的php&Laravel學習羣：109256050

《Npm Debug Series》是咱們課程laravel實戰實戰系列課程的擴展閱讀篇，雖然視頻中咱們已經將npm install過程當中的常見問題及解決方案都說了，可是鑑於npm的問題相對頻繁，有隨時查閱之需，故有此係列文章。

最近不少小夥伴在使用最新的laravel5.4來學習咱們的laravel實戰優雅入門：任務管理系統（一），在進行到第14節前端資源的管理與調用（elixir）時，當執行了npm run dev命令來編譯前端資源時，常常會遇到一個報錯，相似這樣：

> 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
複製代碼

或者說：

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'.
複製代碼

可能你具體的錯誤提示還稍有差別，不過這裏先無論它，重點在於問題是出在cross-env這個組件上。

這個cross-env是個什麼鬼？有什麼用？

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的鍋~也便是咱們在windows系統上使用NODE_ENV=production這樣的方式來設置node環境時，由於windows的系統變量是%ENV_VAR%這種格式，而「行業標準」是$ENV_VAR這樣的，固然windows上的bash例外。

那麼爲了解決這個跨平臺環境變量的問題，就有了cross-env這個組件。知道這些個有啥用呢？

用處是，cross-env只是用在windows系統上的，在Mac和Linux系統上沒用，不須要裝，裝了反而會壞事兒~

因此從這一點上，你的問題其實有兩種可能：

1. 你的項目環境是Windows系統，你沒有裝cross-env,或者說由於路徑等其餘緣由調用不到它。
2. 你的項目環境是Linux或Mac，這個時候你不必裝cross-env，可是你卻裝了，或者說laravel默認帶了，並且裝就裝吧，路徑調用每每還有錯
3. 這裏特別的是，若是你是用的Homestead開發環境，由於你虛擬機裏是Linux，因此若是你在Host主機上去操做，那你就是Windows環境，若是你vagrant ssh進了虛擬機操做，那麼就是Linux環境；

因此解決辦法也要基於你的項目開發環境：

1、 Linux（Homestead）或Mac環境下：

你要作的，只是將你的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"
複製代碼

2、 Windows系統下（WAMP、MAMP）

1. 首先你須要裝一下cross-env，執行：

npm install --save-dev cross-env  --no-bin-links
複製代碼

或者你也能夠全局安裝一下cross-env，以防止之後在其餘項目也出現相似錯誤：

npm install -g cross-env  --no-bin-links
複製代碼

2. 將package.json文件中的cross-env調用換成具體路徑node_modules/cross-env/dist/bin/cross-env.js，最終相似這樣：

"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"
複製代碼

3. 保險起見，再執行一下npm install --no-bin-links
4. 而後再去執行npm run dev來試試

爲何會出來這麼多梗？甚至不少人所以詬病laravel 5.4不友好——直接下載全新安裝都跑不起來

由於一直到laravel 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裏沒有依賴cross-env,可是在上方聲明瞭cross-env的路徑：node_modules/cross-env/bin/cross-env.js，由於laravel-mix這個組件裏用到了cross-env。可是沒多久，cross-env的做者對組件路徑作了更改，將cross-env/bin換成了cross-env/dist,因而在這個laravel commit裏，package.json文件裏更改了cross-env的路徑，同時"devDependencies"里加上了"cross-env": "^3.2.3"，而後沒幾天，做者們意識到既然依賴了cross-env，就不必上面寫具體路徑了，因此在這個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裏依賴了cross-env，因此他就在laravel-mix裏直接取消了對cross-env的依賴，由於不必重複安裝，這直接致使了一系列問題的發生。並且這期間，laravel裏對cross-env的依賴一直停留在"cross-env": "^3.2.3",直到5.4.30，才忽然變成"cross-env": "^5.0.1". 因此呢，取決於你所使用的laravel和laravel-mix的版本，多是你package.json裏沒有cross-env而報錯，也多是路徑變了之後沒更新，也多是laravel調用的版本一直過低，由於這期間你可能執行了composer update或npm update這些命令而致使二者的小版本都發生變化，因此說不清道不明的問題就發生了。

最後，向依然在Windows上裸奔的laravel開發者致以凝重的深望~