新加的插件，我怎么知道是应该放在devDependencies还是应该放在dependencies里呢

Question

VUE 项目中 的 package.json 如下

dependencies
devDependencies

其中 devDependencies 在本地或开发坏境下运行代码所依赖的，若发到线上，其实就不需要这些;而 dependencies依赖的包不仅开发环境能使用，生产环境也能使用.

但是为啥 我这个项目，如上图，

我的问题是：

1. 为啥像babylonjs，file-loader，jquery 都放在devDependencies了

，但是生产环境貌似也没有报错，为什么？我明明只放在开发环境，生产环境应该引用报错才对啊？

1. 我如何知道，我新加的插件，是应该放在devDependencies还是应该放在dependencies里呢？

Answer 1

• 放在那只是规范问题，你这情况只能说明没有按规范下载依赖包。（这种规范是有用的，就像现在你也迷茫了，到底是什么依赖）。
• 不会报错，只要下载下来 vue-cli 打包的时候都是能找到打包进去的。
• 你在代码里需要 import 导入的是生产依赖。而一般自动化工具都是开发依赖如 gulp webpack babel 等插件。
• 如果你按规范下载，如现在的 nuxt 和 egg 需要以node为基础服务，在部署的时候就可以通过 npm i --production 只下载dependencies中的依赖，而不必下载转码类的依赖（当然全部下载也没关系，只是没什么用）。

Answer 2

你放在哪都是规范问题, 在打包的时候是不会关注这2个字段的.
打包的时候是直接读的node_modules.
还是建议放的规范些, 这样能让接手的人更加快速地理解你这个插件属于哪个分类.

Answer 3

1. NPM 的设计目标是帮助 node.js 程序解决依赖问题。后来，以 browserify 和 webpack 为代表的打包工具让它 也 可以帮助 web 前端开发者
2. 所以 package.json 是针对 node.js 设计的，尤其是 dependencies 和 devDependencies，前者表示运行时依赖，后者表示开发时依赖。前者表示运行时必须有，后者多数是测试工具、规范工具等。
3. 对于 web 前端来说，上线的都是打包后的代码，运行时需求的代码都在里面，即并不需要 node_modules，所以你安装在 dependencies 还是 devDependencies 都无所谓
4. 想区分的话，安装的时候 npm i=dependencies，npm i -D=devDependencies