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/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 使用元件庫出現了下圖問題

於是改成 Rollup 模式打包，但這樣有會闡釋新的問題，上面說到 Rollup 模式打包時 module 不能選 commonjs，只能用 esNext/ES2015，這樣打出的產物引入到 Next.js 專案中會產生下圖問題，意思是 Next.js 不能載入模組為 ESModule 的第三方依賴，這裡有個 Stack Overflow上的問題, Next.js 端的解決辦法安裝一個外掛在轉換一層

上面的問題我不想在 Next.js 端來解決，我想在元件庫打包時來解決，這樣使用方就可以無腦使用了

最終打包配置檔案

最終使用方式

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

.fatherrc.ts 配置檔案


export default [
 {
     // babel 模式會打包所有檔案包括下圖的 index.ts build.ts
     esm: 'babel',
 },
 {
     // 一個空的檔案只引入scss 用於打包css，因為 esm: babel 模式下無法打包scss，
     entry: ['src/tasty'],
     umd: {},
     extractCSS: true,
 }
];

6b11130754ed4d8f90790927ea333f0d_tplv-k3u1fbpfcp-watermark.png

最後再說一點就是要實現 npm 指定目錄載入還需要在 package.json 設定 exports 引數，我的設定如下圖所示

dumi 打包元件庫問題

遇到的問題

最終打包配置檔案

相關文章