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

   

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