发布时间：2018-12-29 16:41:31编辑：文明阅读（1199）
《 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 系统上没用**，不需要装，装了反而会坏事儿~
所以从这一点上，你的问题其实有两种可能：
你的项目环境是 Windows 系统，你没有装cross-env,或者说因为路径等其他原因调用不到它。
你的项目环境是 Linux 或 Mac，这个时候你没必要装cross-env，但是你却装了，或者说 laravel 默认带了，而且装就装吧，路径调用往往还有错
这里特别的是，如果你是用的 Homestead 开发环境，因为你虚拟机里是 Linux，所以如果你在 Host 主机上去操作，那你就是 Windows 环境，如果你vagrant ssh进了虚拟机操作，那么就是 Linux 环境；
所以解决办法也要基于你的项目开发环境：
你要做的，只是将你的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，执行：
npm install --save-dev cross-env --no-bin-links
或者你也可以全局安装一下cross-env，以防止以后在其他项目也出现类似错误：
npm install -g cross-env --no-bin-links
将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"
保险起见，再执行一下npm install --no-bin-links
然后再去执行npm run dev来试试
因为一直到 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这些命令而导致两者的小版本都发生变化，所以说不清道不明的问题就发生了。
7
4
4
2
2
