如何正确构建含依赖的NPM UI组件包？解决安装后主应用依赖缺失问题

我开发了一个UI组件库，开发过程中使用了styled-components、react-hook-form等包，能够正常构建并发布该库，但将其安装到主应用时，会提示这些模块不存在。请问如何构建并发布包含这些模块的NPM包，使得主应用安装后无需自行安装这些依赖？

我的构建脚本如下：

rm -rf dist/ && prettier --write src/ && npm run build:esm && npm run build:cjs

核心是通过依赖声明调整或构建配置，确保主应用能正确获取组件库所需的依赖。

1. 调整package.json的依赖分类 #

• 将styled-components、react-hook-form这类组件库运行时必须的依赖，从devDependencies移到dependencies字段。这样主应用安装你的组件库时，npm会自动把这些依赖同步安装到主应用的node_modules目录。
• 补充：如果是React、ReactDOM这类主应用大概率已安装的基础依赖，可以保留在peerDependencies中，避免重复安装；但组件库专属的、主应用未必会装的依赖，务必放到dependencies。

2. 配置构建工具打包依赖（可选） #

如果希望把依赖直接打包到组件库的输出文件里，彻底避免主应用单独安装，需要调整构建配置：

• 若用Rollup：修改rollup.config.js，将external设为空数组（不排除任何依赖），同时确保启用@rollup/plugin-node-resolve和@rollup/plugin-commonjs插件，用来解析node_modules中的依赖。
• 若用Webpack：修改webpack.config.js，移除或清空externals字段，让Webpack把所有依赖打包到输出文件中。

3. 校验package.json的入口配置 #

确保package.json里的入口字段正确指向构建后的文件，比如：

{
  "main": "dist/cjs/index.js",
  "module": "dist/esm/index.js",
  "type": "module"
}

4. 重新构建发布 #

运行你现有的构建脚本重新生成dist文件，然后重新发布：

npm run build
npm publish

完成以上步骤后，主应用安装你的组件库时，要么自动获取所需依赖，要么依赖已被打包进组件库，就不会再出现模块缺失的提示了。

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