本文旨在解决在使用 Rollup 构建 React 组件库时，组件内部引用其他自写组件时遇到的 "Unresolved dependencies" 错误。通过配置 Rollup 插件和 tsconfig.json 文件，确保组件库能够正确解析和打包内部依赖关系，最终成功构建可用的组件库。
在使用 Rollup 构建组件库时，经常会遇到组件内部引用其他自写组件导致构建失败的问题，错误信息通常类似于 "Unresolved dependencies"。 这通常是由于 Rollup 无法正确解析组件之间的依赖关系，尤其是当涉及到 TypeScript 和 CSS 模块时。以下提供一种解决方案，通过适当配置 rollup.config.mjs 和 tsconfig.json 文件，确保 Rollup 能够正确处理这些依赖关系。
1. 检查 rollup.config.mjs 配置
rollup.config.mjs 文件是 Rollup 的核心配置文件，需要确保以下几点：
- 插件顺序： 插件的顺序很重要。通常，resolve 插件应该放在 commonjs 插件之前，以确保能够正确解析 CommonJS 模块。typescript 插件应该在处理其他模块之前运行，以便将 TypeScript 代码转换为 JavaScript。
- external 插件： rollup-plugin-peer-deps-external 插件用于将 peerDependencies 中的模块排除在 bundle 之外。这对于组件库来说非常重要，因为你希望用户自己安装和管理这些依赖。
- postcss 插件： 如果你的组件使用了 CSS 模块，需要使用 rollup-plugin-postcss 插件来处理 CSS。
以下是一个示例 rollup.config.mjs 文件：
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import typescript from "@rollup/plugin-typescript";
import { terser } from 'rollup-plugin-terser';
import external from 'rollup-plugin-peer-deps-external'
import postcss from 'rollup-plugin-postcss'
import dts from "rollup-plugin-dts";
import packageJson from "./package.json";
export default [
{
input: "src/index.ts",
output: [
{
file: packageJson.main,
format: "cjs",
sourcemap: true,
name: 'ui-components'
},
{
file: packageJson.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
resolve(),
commonjs(),
external(),
postcss(),
terser(),
typescript({ tsconfig: "./tsconfig.json" }),
],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
external: [/\.css$/],
plugins: [dts.default()],
},
];注意： 在生成声明文件 .d.ts 的配置中，需要添加 external: [/\.css$/]，以避免将 CSS 文件包含在声明文件中。
2. 检查 tsconfig.json 配置
tsconfig.json 文件用于配置 TypeScript 编译器。以下是一些重要的配置项：
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
- baseUrl 和 paths： baseUrl 用于指定模块解析的基准目录，paths 用于配置模块路径的别名。这对于简化模块导入路径非常有用。
- moduleResolution： moduleResolution 应该设置为 node，以便 TypeScript 能够使用 Node.js 的模块解析规则。
- declaration 和 declarationDir： declaration 应该设置为 true，以生成声明文件。declarationDir 用于指定声明文件的输出目录。
- allowImportingTsExtensions: 需要设置为 true，允许导入 .ts 扩展名的文件。
以下是一个示例 tsconfig.json 文件：
{
"compilerOptions": {
"target": "es2016",
"jsx": "react",
"module": "ESNext",
"moduleResolution": "node",
"declaration": true,
"emitDeclarationOnly": true,
"sourceMap": true,
"outDir": "dist",
"declarationDir": "types",
"allowSyntheticDefaultImports": true,
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipDefaultLibCheck": true,
"skipLibCheck": true,
"allowImportingTsExtensions": true,
"baseUrl": "src",
"rootDir": "src",
"paths": {
"atoms/*": [
"atoms/*"
],
"molecules/*": [
"molecules/*"
],
"styles/*": [
"styles/*"
]
}
}
}3. 模块导入路径
确保组件内部的模块导入路径是正确的。使用 baseUrl 和 paths 配置可以简化导入路径。例如，如果你的组件结构如下：
src/ ├── components/ │ ├── Text/ │ │ ├── Text.tsx │ │ └── index.ts │ └── index.ts └── index.ts
在 Text.tsx 中导入其他组件时，可以使用以下路径：
import Text from 'atoms/Text/Text'; // 假设 atoms 是 paths 中配置的别名
4. 清理构建缓存
有时候，Rollup 或 TypeScript 的构建缓存可能会导致问题。尝试清理构建缓存并重新构建项目：
rm -rf dist # 删除 dist 目录 npm run build # 重新构建项目
5. 总结
通过以上步骤，你应该能够解决在使用 Rollup 构建组件库时遇到的组件内部引用问题。 关键在于正确配置 rollup.config.mjs 和 tsconfig.json 文件，并确保模块导入路径是正确的。 此外，清理构建缓存也是一个有用的技巧。 请记住，构建组件库是一个迭代的过程，可能需要多次尝试和调整配置才能达到最佳效果。
