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

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开发者致以凝重的深望~