本文旨在解决在使用 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 编译器。以下是一些重要的配置项：
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 文件，并确保模块导入路径是正确的。 此外，清理构建缓存也是一个有用的技巧。 请记住，构建组件库是一个迭代的过程，可能需要多次尝试和调整配置才能达到最佳效果。
以上就是使用 Rollup 构建组件库时解决组件内部引用问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518990.html
微信扫一扫 
支付宝扫一扫 
