这两个字段本意是为了加快项目下载依赖速度的。
比如可能存在单元测试、代码格式化等依赖项插件，这些依赖项对于这个项目本身而言并不是导入的模块，而是在开发时才需要用到，那么对于仅仅想运行一下项目、而非要开发项目的人来说，也必须 npm install 一遍。可你要知道 npm 早期版本可是以安装慢著称的（虽然从 npm 5.0 之后已经有很大改善了）。
所以搞出来了两个字段，如果只是想跑一遍项目，那么 npm install --production 就好了，这样只会下载安装 dependencies 里的依赖项。
但对于现在的前端来说，如果不是工具库的开发者，那么 Webpack 一类的 Bundle 工具基本就是必需品（Vue、React，三大框架中的俩依赖于此）。你说 babel 之类的依赖项，算 dependencies 里吧可你又的确没在项目里 import Babel from 'babel' 过；算 devPependencies 里吧可你真要 npm install --production 不安装它的话项目还是跑不起来。所以这俩字段就变成了一个比较鸡肋的存在
一般来说的话，在运行阶段依赖的项，放到 dependencies 里；仅仅在开发、测试、编译阶段依赖的项，放到 devPependencies。遵循这个原则就可以了。
P.S. 中文网络上会流传一些错误的说法，比如 Webpack 不会打包 devPependencies 下的代码啊 balabala，对此我的建议是：不要搜中文技术文章，全是错的还互相抄。
这俩字段语义不一样。
‘devDependencies’ 是说，开发此项目的时候你会用到的任何包，一般是工具类包比如各大 CLI 框架打包工具， package.json scripts 里要用到的一些命令行工具，以及测试框架工具之类的。这个字段的用途是记录开发这个项目过程中需要用到哪些包，你在清除 node_modules 的时候或者别人 git clone 你的项目的时候能轻松还原你的开发环境。
‘dependencies’ 是说，你这个项目作为一个 npm 包给别人用的时候，在运行时还需要依赖什么其他的包才能满足你的运行要求。前提是你的这个项目是打算以 npm 包的形式发布到某个 registry 给别人用的(或者本地 npm link)。 这个字段里声明的依赖会在别人安装你的时候被一并安装进来，而且这个过程是递归的。不管别人把你当作 dependence 还是 devDependence 安装。
综上：
- 如果你的这个前端项目并不是一个库，不需要发布到 npm 仓库供别人安装使用，那么声明在dependencies 和 devDependencies 中的依赖没有大的区别。按语义讲的话，你应该把依赖都放到 devDependencies 里。
- 如果你的这个前端项目需要发布到 npm 仓库供别人 npm install 的话，你就要小心你最终的 package.json 里声明的 dependencies 了。
转载：https://www.h5w3.com/43735.html