likes
comments
collection
share

dumi 打包组件库问题

作者站长头像
站长
· 阅读数 34

  • dumi介绍

    dumi 打包组件库文档静态站点以及部署官网已经有详细的讲解，这里不多讲了，下面主要讲一下 father 打包组件库并发布到 npm 中所遇到的问题
dumi，中文发音嘟米，是一款为组件开发场景而生的文档工具，与 father 一起为开发者提供一站式的组件开发体验，father 负责构建，而 dumi 负责组件开发及组件文档生成。
  • 文档中关于 father 构建只提了上面一句话，一切问题都得去 father 的仓库去找答案
  • father 各种打包产物示例配置

  • father 有两种打包模式分别是 babel/Rollup，这里有篇文章做了详细介绍

    遇到的问题

  • 源码中出现循环依赖 Rollup 模式会出现打包失败的情况，如下所示，但 babel 模式不会报错，解决办法手动更改代码中的循环依赖

    ➜  react-tasty-ui git:(feat/base-comps) ✗ npm run build

> @xxx/react-tasty-ui@0.0.10 build
> father-build

Clean dist directory
Build esm with rollup
Circular dependency: src/index.ts -> src/components/Toast/index.tsx -> src/index.ts
Build esm success entry: src/index.ts

  • Rollup 模式打包 tsconfig.json 的 "module": 不可以设置为 commonjs,必须设置成 esModule 格式

    ➜  react-tasty-ui git:(feat/base-comps) ✗ npm run build

> @xxx/react-tasty-ui@0.0.10 build
> father-build

Clean dist directory
Build esm with rollup
✖  error     Error: Incompatible tsconfig option. Module resolves to 'CommonJS'. This is incompatible with rollup, please use 'module: "ES2015"' or 'module: "ESNext"'. 
    at checkTsConfig (/Users/yaolei/code/rushable/react-tasty-ui/node_modules/rollup-plugin-typescript2/src/check-tsconfig.ts:9:9)
    at parseTsConfig (/Users/yaolei/code/rushable/react-tasty-ui/node_modules/rollup-plugin-typescript2/src/parse-tsconfig.ts:50:2)
    at Object.options (/Users/yaolei/code/rushable/react-tasty-ui/node_modules/rollup-plugin-typescript2/src/index.ts:88:64)
    at /Users/yaolei/code/rushable/react-tasty-ui/node_modules/rollup/dist/shared/rollup.js:19931:36
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at /Users/yaolei/code/rushable/react-tasty-ui/node_modules/rollup/dist/shared/rollup.js:19931:90
    at getInputOptions (/Users/yaolei/code/rushable/react-tasty-ui/node_modules/rollup/dist/shared/rollup.js:19924:61)
    at rollupInternal (/Users/yaolei/code/rushable/react-tasty-ui/node_modules/rollup/dist/shared/rollup.js:19883:72)

  • babel 模式会默认打包 css/less 等文件，但 scss 文件不会处理，

    但这里我遇到了一个问题，就是我的这个组件库是供内部的一个 Nextjs 项目用的，我原本设想的组件库引入模式是下面这样子的，需要输出不同的包，

    // 组件引入 
import { Alert } from '@xxx/react-ui';
// Icon引入 
import { AddressIcon } from '@xxx/react-ui/icon'

    由于 scss 文件不会被处理导致 Next.js 使用组件库出现了下图问题 dumi 打包组件库问题 于是改成 Rollup 模式打包，但这样有会阐释新的问题，上面说到 Rollup 模式打包时 module 不能选 commonjs，只能用 esNext/ES2015，这样打出的产物引入到 Next.js 项目中会产生下图问题，意思是 Next.js 不能加载模块为 ESModule 的第三方依赖，这里有个 Stack Overflow上的问题, Next.js 端的解决办法安装一个插件在转换一层 dumi 打包组件库问题 上面的问题我不想在 Next.js 端来解决，我想在组件库打包时来解决，这样使用方就可以无脑使用了

最终打包配置文件

  1. 最终使用方式

    // 入口处引入 css
import '@xxx/react-ui/css'
// 组件引入 
import { Alert } from '@xxx/react-ui';
// Icon引入 
import { AddressIcon } from '@xxx/react-ui/icon'

  2. .fatherrc.ts 配置文件

    
export default [
 {
     // babel 模式会打包所有文件包括下图的 index.ts build.ts
     esm: 'babel',
 },
 {
     // 一个空的文件只引入scss 用于打包css，因为 esm: babel 模式下无法打包scss，
     entry: ['src/tasty'],
     umd: {},
     extractCSS: true,
 }
];

    dumi 打包组件库问题

  3. 最后再说一点就是要实现 npm 指定目录加载还需要在 package.json 设置 exports 参数， 我的设置如下图所示 dumi 打包组件库问题