我正在参与掘金创作者训练营第5期，点击了解活动详情，一起学习吧！
导语：
前端package.json中常用这样的几个配置:
- dependencies
- Devdependencies
- peerDependencies
- peerDependenciesMeta
- bundleDependencies
- optionalDependencies
如以上理解有误，请指正，谢谢
业务开发常用的
dependencies
开发业务逻辑，必须的依赖，
如何使用
npm install <PACKAGENAME>
yarn add <PACKAGENAME>
Devdependencies
开发构建包时候需要的依赖，
如何使用
npm install --save-dev <PACKAGENAME>
npm install -D <PACKAGENAME>
yarn add --dev <PACKAGENAME>
前端库开发常用配置
peerDependencies
用于说明，库依赖兼容性的；npm7版本之前，仅仅是给个提示；npm7版本之后，列表中的配置会自动安装
如何使用
查看依赖版本，就webpack安装loader举例
- webpack 安装loader - val-loader
- github search val-loader
-
上图发现，需要webpack5, 那么webpack4 就不兼容，不能使用
-
切换上方的tag，看其他版本的配置
- 此时说明，webpack4.x 版本要使用val-loader， 可以使用，得到如下安装命令
npm i -D val-loader@2.1.2
提示依赖安装, 就react项目，自动安装react
{
peerDependencies": {
"react": "17.0.19"
},
}
peerDependenciesMeta
配置peerDependencies中依赖是可选的, 这样就不会安装了
{
"name": "tea-latte",
"version": "1.3.5",
"peerDependencies": {
"tea": "2.x",
"soy-milk": "1.2"
},
"peerDependenciesMeta": {
"soy-milk": {
// 配置依赖项可选
"optional": true
}
}
}
bundleDependencies
把依赖项， 打包到库文件中, 当安装awesome-web-framework依赖时候，就携带了renderized、super-streams
{
"name": "awesome-web-framework",
"version": "1.0.0",
"bundleDependencies": [
"renderized",
"super-streams"
]
}
optionalDependencies
用于表明依赖是可选的，进而避免构建失败,
npm install foo --save-optional
但是code里面要处理好依赖加载失败的情况,如下：
try {
var foo = require('foo')
//包不存在的异常处理
var fooVersion = require('foo/package.json').version
} catch (er) {
foo = null
}
//逻辑处理
if ( notGoodFooVersion(fooVersion) ) {
foo = null
}
// .. then later in your program ..
if (foo) {
foo.doFooThings()
}
package.json依赖优化
不期望安装optional dependencies ,减少包依赖安装，加快安装速度
npm ci --no-optional
期望，是否存在插件或者工具，自动分类dependencies ?
拓展内容
npm install - npm i
- 依据package.json进行安装
- npm install 新的包，会更新package.json ,package-lock.json
- 安装的包，如果有高级版本，可能以最新版本安装
npm ci = npm (clean+install)
- 先删除本地node_modules,然后在执行安装
- 依据package-lock.json进行安装，不会更新package-lock.json。 如果没有package-lock.json ,此命令会无效，故推荐用于ci/cd 持续构建流程中。
- 要求版本npm6版本以上
