dependencies 和 devDenpendencies 的区别
(转载或参考文章):https://my.oschina.net/u/4380991/blog/3359473
(转载或参考文章):https://mp.weixin.qq.com/s/cSHCKRdMPLKyPP_pOH3nkg
(仅供自己做笔记查阅,若侵删)
文章中说npm的依赖共分为以下五类(见npm官方文档https://docs.npmjs.com/files/package.json#dependencies):
- dependencies
- devDependencies
- peerDependencies
- bundledDependencies
- optionalDependencies
前两者经常用到
后三者和发布者有关, 用到的相对较少,所以了解即可
一、dependencies: (运行时依赖)
常用命令:
npm i xxxx@version -S/--save
二、devDenpendencies :(开发依赖)
常用命令:
npm i xxxx@version -D/--save-dev
开发依赖的目的是为了减少在安装依赖时node_modules的体积,提升安装依赖的速度,节省线上及其的硬盘资源以及部署上线的时间。那么那些依赖可以划分为开发依赖呢?
1、构建工具
点名webpack、webpack-cli、rollup(其实我没用过)等等。构建工具是为了生成生产环境的代码,在线上使用的代码其实是他们工作的结果,也就是说在线上时,并不需要他们,因此他们可以归为开发依赖。
当然他们衍生出来的插件,如xxx-webpack-plugin,也属于开发依赖。
2、预处理器
指的是对源代码进行一定的处理并生成最终代码的工具。常见的有css中的less、scss、sass、stylus,js中的typescript、coffee-script、babel等等。
以 babel 为例,常用的有两种使用方式。其一是内嵌在 webpack 或者 rollup 等构件工具中,一般以 loader 或者 plugin 的形式出现,例如 babel-loader。其二是单独使用(小项目较多),例如 babel-cli。babel 还额外有自己的插件体系,例如 xxx-babel-plugin。类似地,less 也有与之对应的 less-loader 和 lessc。这些都算作开发依赖。
在 babel 中还有一个注意点,那就是 babel-runtime 是 dependencies 而不是 devDependencies。
3、测试工具
当然在线上时是用不到测试工具的,因此他们归入开发依赖。常用如chai、e2e等等。
4、其他
最后一类很难概括,是开发时需要使用的,实际上显示要么是已经打包成最终代码了,要么是不需要了。比如 webpack-dev-server 支持开发热加载,线上是不用的;
babel-register 因为性能原因也不能用在线上。其他还可能和具体业务相关。
举例:
"dependencies": {
"axios": "0.19.0", // 只安装这个版本
"better-scroll": "^1.12.6", // 安装 1.X.X 最新版本, 保留前一位
"clipboard": "~2.0.4", // 安装 2.0.X 最新版本, 保留前两位
"autoprefixer": "*", // 安装 最新版本
}
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-eslint": "^8.2.1"
}
注意:
-
^ : 表示第一个版本数不变, 后两个去最新的。
-
~ : 表示前两位不变, 最后一位取最新的。
-
* :表示全部去最新的。