如何配置npm包依赖 使RQB扩展组件库支持tree shaking功能

实现按需加载+规避不必要警告的完整方案 #

1. 先优化依赖配置，解决peer依赖警告问题 #

你最初把所有第三方库都放在devDependencies的思路是对的，但直接把所有UI库都放在必填peerDependencies里，npm 7及以上版本确实会给所有只用到单UI库的用户弹出一堆未满足依赖的警告，体验很差，不推荐这么做。

你可以通过peerDependenciesMeta把非通用的依赖标记为可选，配置示例如下：

{
  "devDependencies": {
    "@chakra-ui/react": "^1.6.5",
    "@material-ui/core": "^4.11.2",
    "antd": "^4.10.3",
    "bootstrap": "^5.0.2",
    "react": "^17.0.1",
    "react-datepicker": "^4.2.1",
    "react-dom": "^17.0.1"
  },
  "peerDependencies": {
    "react": ">=16.8.0",
    "react-dom": ">=16.8.0",
    "@chakra-ui/react": "^1.6.5",
    "@material-ui/core": "^4.11.2",
    "antd": "^4.10.3",
    "bootstrap": "^5.0.2",
    "react-datepicker": "^4.2.1"
  },
  "peerDependenciesMeta": {
    "@chakra-ui/react": { "optional": true },
    "@material-ui/core": { "optional": true },
    "antd": { "optional": true },
    "bootstrap": { "optional": true },
    "react-datepicker": { "optional": true }
  }
}

配置后只有react、react-dom是必填依赖，其他UI库未安装时不会弹出警告，完美规避了多余提示的问题，你只需要在文档里补充说明：使用对应UI组件前需要提前安装对应的依赖即可。

2. 配合打包配置确保tree shaking生效 #

只改依赖配置还不够，还要调整打包和导出配置，才能保证用户只导入Bootstrap组件时不会拉取其他UI库的代码：

• 打包时配置webpack的externals字段，把所有第三方UI库、react相关包都标记为外部依赖，不要把它们的代码打包进你新包的产物里
• 输出ES模块格式的产物，在package.json里配置"module": "dist/esm/index.js"，如果使用ESM规范可以加"type": "module"，方便用户侧的打包工具识别可摇树的代码
• 可选优化：在package.json里配置exports字段，给不同UI库的组件设置独立导出入口，示例如下：

{
  "exports": {
    ".": "./dist/index.js",
    "./bootstrap": "./dist/bootstrap/index.js",
    "./antd": "./dist/antd/index.js",
    "./mui": "./dist/mui/index.js",
    "./chakra": "./dist/chakra/index.js",
    "./react-datepicker": "./dist/react-datepicker/index.js"
  }
}

用户可以选择更精准的导入方式import { BootstrapValueEditor } from '<new-rqb-package-name>/bootstrap'，进一步降低引入冗余代码的概率。

内容的提问来源于stack exchange，提问作者Jake Boone