背景
最近使用 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"]
}
- 新增了 .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"],
},
},
});
- 删掉了
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
