你应该知道的npm依赖配置-蒲公英云

你应该知道的npm依赖配置

女爷i 2022-12-05 15:10 343阅读 0赞

在搭建一个会使用到npm包的项目时往往会有一个package.json文件来记录项目所依赖的库以及版本等其他信息，而其中依赖信息则是通过以下几个字段来区分控制：

dependencies 生成环境依赖包
devDependencies 开发环境依赖包
optionalDependencies 可选择的依赖包
peerDependencies 同等依赖
bundledDependencies 捆绑依赖包

下面我们来看一下这几种依赖的区别以及各自的应用场景：

dependencies

开发项目生产环境运行需要依赖的第三方库，通过命令npm install --save $package会将依赖的版本信息添加到package.json 的dependencies中，其中是否使用--save参数就是控制是否将依赖的版本信息保存到package.json 中。

devDependencies

开发项目开发环境运行所依赖的第三方库，一般与业务逻辑无关，比如webpack以及相关的一些插件，这些第三方库只有在项目打包构建的过程中使用，项目程序的运行并不依赖于此，因此可以将其放在devDependencies中，在打包时便不会将其打入程序包中。通过命令npm install --save-dev $package会将依赖的版本信息添加到package.json 的devDependencies中

optionalDependencies

顾名思义，可选的依赖，指的是，即使在npm install时，该依赖安装失败，install命令依然可以继续，不需要抛错误终端。

相关文档中，该类型针对的场景是，对于针对特定平台才能安装成功的库，或者即使这些库安装失败，你也已经有备用的库来替代（这里考虑的可以是不同库的兼容性程度或性能优劣），可以声明依赖到optionalDependencies中。

bundleDependencies | bundledDependencies

两种名称都支持，不同于其他字段的是这个字段的值为一个数组而非对象,切不包含版本信息版本信息记录在其他依赖配置项中，当项目打包时会将数组包含的库打进项目中。

{
   "bundledDependencies": [
        "myPackage"
    ] 
}

当项目中使用了非npm 仓库来源的包，比如本地自己开发未上传npm 仓库的工具包、自定义配置以后的第三方包等，他人在使用本项目时又无法获取，此时便需要利用项目中通过bundleDependencies标记的打进项目中的工具包。可以通过npm pack命令会将bundleDependencies标记的依赖打包成.tgz压缩包。(如果我的解释不能让你理解，建议亲身尝试一下便可)

peerDependencies

用于指定你当前的插件兼容的宿主必须要安装的包的版本。
首先说明一下那些依赖适用于此配置项：

插件正确运行的前提是，核心依赖库必须先下载安装，不能脱离核心依赖库而被单独依赖并引用；
插件入口api 的设计必须要符合核心依赖库的规范；
插件的核心逻辑运行在依赖库的调用中；
在项目实践中，同一插件体系下，核心依赖库版本最好是相同的；

举个简单的例子：
我们都知道react用于其事件机制的影响，在地域17版本下，不同版本的react是不支持同时使用的。这就往往导致当我们的react项目所以依赖的某个库，也同样使用react且版本不同，会报错不能使用，大概的依赖树关系如下：

node_modules/
        |---- react@16.9.0
        |---- xxxx
                |----node_modules/
                    |---- react@16.8.0

xxxx库依赖并使用了16.9.0版本的react，而宿主项目使用的是16.8.0版本的，此时便会造成版本冲突。

而在xxxx库中package.json这样配置：

{
    "devDependencies": {
        "react": "16.9.0"
    }
    "peerDependencies": {
        "react": ">=16.8.0"
    }
}

在其宿主项目的依赖树则会变为：

node_modules/
        |---- react@16.9.0
        |---- xxxx

扁平化，xxxx使用宿主项目满足条件的react的依赖。
当宿主项目缺少依赖库package.json中peerDependencies所指定的依赖，则会在构建过程中报warning。
比较代表性的使用项目就是ant-design

参考资料
https://github.com/SamHwang1990/blog/issues/7
https://docs.npmjs.com/files/package.json
https://www.npmjs.cn/cli/pack/
https://mp.weixin.qq.com/s/JHDVh9wGj_YaTLtSz4AH7g