你应该知道的npm依赖配置

女爷i 2022-12-05 15:10 280阅读 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_github.com_SamHwang1990_blog_issues_7]  
> [https://docs.npmjs.com/files/package.json][https_docs.npmjs.com_files_package.json]  
> [https://www.npmjs.cn/cli/pack/][https_www.npmjs.cn_cli_pack]  
> [https://mp.weixin.qq.com/s/JHDVh9wGj\_YaTLtSz4AH7g][https_mp.weixin.qq.com_s_JHDVh9wGj_YaTLtSz4AH7g]

[ant-design]: https://github.com/ant-design/ant-design/blob/master/package.json
[https_github.com_SamHwang1990_blog_issues_7]: https://github.com/SamHwang1990/blog/issues/7
[https_docs.npmjs.com_files_package.json]: https://docs.npmjs.com/files/package.json
[https_www.npmjs.cn_cli_pack]: https://www.npmjs.cn/cli/pack/
[https_mp.weixin.qq.com_s_JHDVh9wGj_YaTLtSz4AH7g]: https://mp.weixin.qq.com/s/JHDVh9wGj_YaTLtSz4AH7g