【Node.js】 dependencies 和 devDependencies，我们究竟应该把依赖放到哪里？ ...

我们在网上查找一些 Node.js 教程的时候，很多时候会看到类似这样的命令

npm install less-loader --save-dev
npm install axios --save

很多初学者刚开始学习 Node.js 的时候，可能会有疑问，
为什么有些依赖，他们后面是 --save-dev，而有些依赖是 --save 呢？
这时候你可能会搜到类似这样的答案:

"--save-dev 是把依赖放到 package.json 的 devDependencies 下，--save 是把依赖放到 package.json 的 dependencies 下"

所以问题就来了，依赖放到这两个不同的地方，具体表现出来的区别是什么呢？

区别

其实 Node.js 的官方文档是有提到过的，一图流：

微信图片_20220904001834.jpg

简单翻译一下，当你使用 npm install --production 或者 NODE_ENV=production npm install 的时候 npm 不会安装 devDependencies 下的依赖。

然后就有新的疑问了，我们本地开发都是直接用 npm install, 那我依赖放到哪里是不是都没有影响？

影响

确实，只是本地开发的话，其实完全没有影响，它影响的其实是那些会修改 NODE_ENV 的场景。

以 Vue CLI 创建的 Vue 项目为例，我们在为生产环境版本打包的时候，会将 NODE_ENV 设置为 production，以便我们的配置文件根据实际的环境切换（例如生产环境和测试环境的输出目录可能不同），

这时候如果你把 vue-cli-service 放到了 devDependencies 下，那么在你执行 npm run build 的时候，迎接你的就是无情的报错了，所以打包相关的依赖，在这种应用场景下，是不能放到 devDependencies 下的。

这个结论看起来可能和很多文章说的有冲突，多数情况下，打包工具不应该属于 devDependencies 吗？朴素的理解中，生产版本怎么会依赖打包工具呢？

其实这个问题，本质上是混淆了 Node.js 应用的生产版本和网页应用的生产版本。

我们开发的一个 Vue 网页应用简单可以分为两部分：一部分是它的源码，本质上是一个 Node.js 应用；另一部分是一个静态网页应用，其本质是 Node.js 应用输出的供终端用户访问的打包结果。

package.json 中的 devDependencies 与 dependencies 的区分，其实是针对 Node.js 应用来说的。而这个 Node.js 应用的功能，就是按照我们的配置，如期输出一个静态网页。作为一个将打包输出作为主要功能的应用，不论它处于本地环境、测试环境还是生产环境，无疑都是依赖打包工具才能正常工作的，自然也就不可能把打包工具放到 devDependencies 下。

结语

在纠正了误区之后，我们终于可以通过简单的思考来识别出来，到底那些依赖是真正的 devDependencies 了。尝试自己分析一些吧。

感谢您的观看。

最后编辑时间为: September 4th , 2022 at 11:56 am
本文由 Warren Ma 创作，采用 知识共享署名 4.0 国际许可协议进行许可
可自由转载、引用，但需署名作者且注明文章出处