Laravel 5.4 Mix執行 npm run dev時報錯,提示cross-env not found的原因及解決辦法

pilishen發表於2019-02-16

本文來自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環境;

所以解決辦法也要基於你的專案開發環境:

一、 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"

二、 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
  1. 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"
  1. 保險起見,再執行一下npm install --no-bin-links
  2. 然後再去執行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開發者致以凝重的深望~

相關文章