dumi packaged component library problem

• Introduction of dumi

  The static site of the dumi packaged component library document and the official deployment website have been explained in detail. I won't talk about it here. Let's talk about the problems encountered in father packaging the component library and publishing it to npm.

dumi, Chinese pronunciation Dumi, is a documentation tool for component development scenarios. Together with father, it provides developers with a one-stop component development experience. Father is responsible for construction, while dumi is responsible for component development and component document generation.

• The document only mentions the above sentence about the construction of father. All questions have to go to the father 's warehouse to find the answer.
• father Example configuration of various packaged products

• Father has two packaging modes: babel / Rollup , here is an article for a detailed introduction

  problems encountered

• There is a circular dependency in the source code Rollup mode will fail to package, as shown below, but the babel mode will not report an error, the solution is to manually change the circular dependency in the code

   ➜  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 The "module" of tsconfig.json in the mode package: cannot be set to commonjs , must be set to esModule format

   ➜  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 mode will package css/less and other files by default, but scss files will not be processed,

  But here I encountered a problem, that is, this component library of mine is used for an internal Nextjs project. The import mode of the component library I originally envisaged is as follows, and different packages need to be output.

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

  Because the scss file will not be processed, the following problem occurs when Next.js uses the component library
  
  So it is changed to Rollup mode packaging, but this will explain new problems. As mentioned above, when the Rollup mode is packaged, the module cannot choose commonjs, only esNext/ES2015 can be used, and the imported product will be introduced into the Next.js project. The following figure will be generated The problem means that Next.js cannot load the module as a third-party dependency of ESModule. Here is a question on Stack Overflow. The solution on the Next.js side is to install a plugin in the conversion layer.
  
  I don't want to solve the above problem on the Next.js side, I want to solve it when the component library is packaged, so that the user can use it without thinking

Final packaging configuration file

1. end use

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

2. .fatherrc.ts configuration file

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

   

3. The last thing to say is that to realize the loading of the specified directory of npm, you need to set the exports parameter in package.json. My settings are shown in the figure below.