dumi 打包组件库问题

  • 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/[email protected] 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/[email protected] 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 打包组件库问题_第1张图片
    于是改成 Rollup 模式打包,但这样有会阐释新的问题,上面说到 Rollup 模式打包时 module 不能选 commonjs,只能用 esNext/ES2015,这样打出的产物引入到 Next.js 项目中会产生下图问题,意思是 Next.js 不能加载模块为 ESModule 的第三方依赖,这里有个 Stack Overflow上的问题, Next.js 端的解决办法安装一个插件在转换一层
    dumi 打包组件库问题_第2张图片
    上面的问题我不想在 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张图片

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

你可能感兴趣的:(react.js组件库)