[FE] 使用 vite 构建 react lib

背景

最近使用 vite 创建了 React + TypeScript 项目，其中编写了一些 React 组件。
就产生了如何用 vite 将这些 React 组件打包成 npm lib 的问题。

本文记录了一下相关的 vite 配置。
示例代码：github: test-vite-lib

遗留问题：
在 watch 模式下，每次文件变更不会自动生成 css 文件
In watch mode, changes in @import'ed files don't trigger CSS rebuild

工程配置

（1）TypeScript 配置：tsconfig.json

配置在 .ts 文件变更（tsc -w）的时候，自动生成 .d.ts 文件。

{
  "compilerOptions": {
    "target": "ESNext",
    "lib": ["DOM", "DOM.Iterable", "ESNext"],
    "types": ["vite/client"],
    "allowJs": false,
    "skipLibCheck": false,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "declaration": true,
    "outDir": "./types",
    "emitDeclarationOnly": true,
  },
  "include": ["./src"]
}

相比页面 app 项目，当前 lib 项目的配置变更如下：

• 新增了 .d.ts 的生成配置

{
    ...,
    "noEmit": false,
    "declaration": true,
    "outDir": "./types",
    "emitDeclarationOnly": true,
  },
}

（2）Vite 配置：vite.config.ts

import { defineConfig } from "vite";

// https://vitejs.dev/config/
export default defineConfig({
  /**
   * [plugin:vite:css] '~antd/dist/antd.less' wasn't found.
   * less import no support webpack alias '~'
   *
   * Ref: https://github.com/vitejs/vite/issues/2185#issuecomment-784637827
   */
  resolve: {
    alias: [{ find: /^~/, replacement: "" }],
  },

  /**
   * [plugin:vite:css] Inline JavaScript is not enabled. Is it set in your options?
   *
   * Ref:
   *   https://blog.csdn.net/baobao_123456789/article/details/113986961
   *   https://stackoverflow.com/questions/46729091/enable-inline-javascript-in-less
   * 
   * TODO:
   *   In watch mode, changes in @import'ed files don't trigger CSS rebuild
   *   https://github.com/vitejs/vite/issues/3387
   */
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true,
      },
    },
  },

  // https://vitejs.bootcss.com/config/#build-options
  build: {
    // https://vitejs.bootcss.com/config/#build-lib
    lib: {
      entry: "./src/index.tsx",
      formats: ["es"],
      fileName: "index",
    },

    // https://vitejs.bootcss.com/config/#build-minify
    minify: false,

    /**
     * index.es.js:250 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
     * 
     * Ref:
     *   https://github.com/styled-components/styled-components/issues/2690
     *   https://vitejs.bootcss.com/config/#build-rollupoptions
     */
    rollupOptions: {
      external: ["react", "react-dom"],
    },
  },
});

相比页面 app 项目，当前 lib 项目的配置变更如下：

• 删掉了 plugins: [reactRefresh()],
• 新增了 build 配置

// https://vitejs.bootcss.com/config/#build-options
build: {
  // https://vitejs.bootcss.com/config/#build-lib
  lib: {
    entry: "./src/index.tsx",
    formats: ["es"],
    fileName: "index",
  },

  // https://vitejs.bootcss.com/config/#build-minify
  minify: false,

  /**
   * index.es.js:250 Uncaught Error: Minified React error #321; visit https://reactjs.org/docs/error-decoder.html?invariant=321 for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
   * 
   * Ref:
   *   https://github.com/styled-components/styled-components/issues/2690
   *   https://vitejs.bootcss.com/config/#build-rollupoptions
   */
  rollupOptions: {
    external: ["react", "react-dom"],
  },
},

设置了入口文件（entry）为 ./src/index.tsx，
构建产物的模块格式为 es（ES Module），文件名（fileName）为 index。

配置 rollup 相关的配置 rollupOptions.external，将 react 和 react-dom external 掉，页面 app 项目编译时会报错 Minified React error。

（3）npm 配置：package.json + .npmignore

package.json 中配置 main types repository files

• main 指定 npm lib 包的默认入口文件
• types 指定 TypeScript 默认 .d.ts 文件名
• repository.url 指定 npm 包仓库地址
• files 指定 npm publish 发布哪些文件 ["*"] 表示全部都发布（要结合 .npmignore）

添加了 .npmignore 文件，配置不发布 node_modules，

/node_modules

---

参考

github: test-vite-lib