个人博客

Appearance

package.json ​

依赖配置 ​

配置属性 ​

在 package.json 中关于依赖的配置属性包含以下几个：dependencies , devDependencies , peerDependencies , bundledDependencies , optionalDependencies。对于我们一般接触到的就前面三个

  1. dependencies

指定了项目运行所依赖的模块，开发环境和生产环境的依赖模块都可以配置到这里

  1. devDependencies

有些第三方包只是你在开发环境的时候需要使用到，在生产环境就不需要这些包了。如一些检查工具 eslint、prettier 等。

只会在开发环境下依赖的模块，生产环境不会被打入包内。通过 NODE_ENV=developement 或 NODE_ENV=production 指定开发还是生产环境。

这边又一个误区：什么叫生产环境就不需要了？

  • 如我们业务工程代码，在 devDependencies 中配置了 prettier，那么开发环境 npm instsall 的时候会下载 prettier；那么在 CI/CD 中运行npm install会下载么？

答案：如果操作失误仍然是会下载的。

  • cross-env NODE_ENV=production & npm build 会下载
  • 系统环境变量设置 export NODE_ENV=production 时才不会安装 devDependencies
  • npm install --only=dev
  1. peerDependencies

这个属性一般用于开发一个第三方包，其规定了所依赖的版本以及用户安装的依赖包版本的兼容性。

  1. bundledDependencies

bundledDependencies 的值是一个数组，数组里可以指定一些模块，这些模块将在这个包发布时被一起打包。

  1. optionalDependencies

某些场景下，依赖包可能不是强依赖的，这个依赖包的功能可有可无，当这个依赖包无法被获取到时，你希望 npm install 继续运行，而不会导致失败，你可以将这个依赖放到 optionalDependencies 中，注意 optionalDependencies 中的配置将会覆盖掉 dependencies 所以只需在一个地方进行配置。

当然，引用 optionalDependencies 中安装的依赖时，一定要做好异常处理，否则在模块获取不到时会导致报错。

匹配规则 ​

对于依赖配置的匹配规则可以有以下几种方式：

json
{
  "dependencies": {
    "antd": "ant-design/ant-design#4.0.0-alpha.8", // github
    "axios": "^1.2.0", // 版本号规则
    "test-js": "file:../test", // 本地文件夹
    "test2-js": "http://cdn.com/test2-js.tar.gz" // 可下载的tar.gz文件
  }
}
  1. 版本号 version

这是最常用的方式,遵循 semver 语义化版本规范，通过我们 npm 的仓库去匹配对应的版本下载，其包的下载地址是 npm 的包仓库，这就涉及到 npm 的 registry , .npmrc文件

json
{
  "dependencies": {
    "axios": "^1.2.0" // 版本号规则
  }
}
  1. http 可下载 tar.gz 包

不想使用 npm 仓库的那就可以自己去定义包下载的地址。

json
{
  "dependencies": {
    "test2-js": "http://cdn.com/test2-js.tar.gz" // 可下载的tar.gz文件
  }
}
  1. 本地包

主要用于调试使用，对于 npm^7 或者 pnpm 等可以使用 workspace 的概念去维护内部版本

json
{
  "dependencies": {
    "test-js": "file:../test" // 本地文件夹
  }
}
  1. github 包
json
{
  "dependencies": {
    "antd": "ant-design/ant-design#4.0.0-alpha.8" // github
  }
}
  1. 其他仓库
  • git://github.com/user/project.git#commit-ish
  • git+ssh://user@hostname:project.git#commit-ish
  • git+ssh://user@hostname/project.git#commit-ish
  • git+http://user@hostname/project/blah.git#commit-ish
  • git+https://user@hostname/project/blah.git#commit-ish
json
{
  "dependencies": {
    // 其他仓库 git+https://xxxx.git#分支仓库
    "npm-electron": "git+https://git.code.tencent.com/dolphin-pc/npm-release/npm-electron.git#0.0.12"
  }
}

目录、文件相关 ​

这个主要涉及 包 和 cli 等属性，分别是： bin 、 main 、 module 、browser 、 files 。

下面说涉及我们包使用场景的三个属性，具体有哪些场景

  • 只允许在客户端使用的

那么这三个属性分别是

  • main : 定义了 npm 包的入口文件，browser 环境和 node 环境均可使用
  • module : 定义 npm 包的 ESM 规范的入口文件，browser 环境和 node 环境均可使用
  • browser : 定义 npm 包在 browser 环境下的入口文件