在使用 Rollup 构建组件库时，如果组件之间存在内部依赖关系，可能会遇到无法正确导入的问题。本文将详细介绍如何配置 Rollup，以确保内部组件能够被正确地打包和引用，从而成功构建组件库。主要聚焦于 rollup.config.mjs 的配置，特别是 external 属性的使用，以解决 "Unresolved dependencies" 错误。
问题描述
在构建组件库时，如果一个组件依赖于另一个组件（例如，Button 组件使用了 Text 组件），Rollup 可能会将内部组件视为外部依赖，导致构建失败，并出现 "Unresolved dependencies" 的警告。这通常是因为 Rollup 无法正确处理组件之间的依赖关系，特别是当组件使用了 CSS 样式时。
解决方案
解决此问题的关键在于正确配置 rollup.config.mjs 文件，特别是 external 属性。external 属性用于指定哪些模块应该被视为外部依赖，而不是被打包到组件库中。
步骤 1：理解 external 属性
external 属性接受一个数组，数组中的每个元素可以是一个字符串或一个正则表达式。如果模块的 ID 匹配数组中的任何一个元素，Rollup 就会将其视为外部依赖。
步骤 2：配置 external 属性
使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。
对于组件库构建，通常需要将 CSS 文件视为外部依赖，因为它们通常由单独的 CSS 处理工具（如 rollup-plugin-postcss）处理。因此，需要在 rollup.config.mjs 文件中添加 external: [/\.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(),
resolve(),
typescript({ tsconfig: "./tsconfig.json" }),
],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
external: [/\.css$/], // 关键配置：将 CSS 文件视为外部依赖
plugins: [dts.default()],
},
];步骤 3：检查 tsconfig.json 文件
确保 tsconfig.json 文件中的 paths 属性配置正确，以便 TypeScript 能够正确解析模块路径。例如：
{
"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/*": [
"components/atoms/*"
],
"molecules/*": [
"components/molecules/*"
],
"styles/*": [
"styles/*"
]
}
}
}步骤 4：注意事项
- 确保 rollup-plugin-postcss 插件已正确安装并配置，以便处理 CSS 文件。
- 如果组件之间存在其他的非 CSS 依赖关系，也需要将其添加到 external 属性中。
- 仔细检查 Rollup 的输出日志，以确定是否存在其他的 "Unresolved dependencies" 警告。
总结
通过正确配置 rollup.config.mjs 文件中的 external 属性，可以将内部组件的 CSS 依赖视为外部依赖，从而解决 Rollup 构建组件库时遇到的 "Unresolved dependencies" 问题。同时，确保 tsconfig.json 文件中的 paths 属性配置正确，以便 TypeScript 能够正确解析模块路径。
