vite 4 开发react18组件库打包配置

Vite 4 同样也可以用于开发 React 18 组件库。以下是一个基本的打包配置示例：

// vite.config.js
import reactRefresh from '@vitejs/plugin-react-refresh'

export default {
  plugins: [reactRefresh()],
  build: {
    lib: {
      entry: 'src/index.js', // 组件库的入口文件
      name: 'MyComponent', // 组件库的名称
      fileName: format => `my-component.${format}.js` // 打包后文件的名称
    },
    rollupOptions: {
      external: ['react', 'react-dom'], // 外部依赖的声明
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
}

上面的配置将会把 React 组件库打包成一个 UMD 格式的 JavaScript 文件，可以通过 script 标签引入，也可以通过 import 引入。其中，`lib.entry` 指定了组件库的入口文件，`lib.name` 指定了组件库的名称，`lib.fileName` 指定了打包后文件的名称。

在 `build.rollupOptions` 中，`external` 指定了组件库的外部依赖，这里有 React 和 React DOM；`globals` 指定了组件库的全局变量声明，这里将 React 和 React DOM 指定为全局变量。

需要注意的是，如果组件库中使用了一些 React 的插件或者第三方库，需要在 `build.rollupOptions.external` 中声明这些依赖。如果不声明会导致打包后的文件中包含这些依赖的代码，从而增加文件体积。

除了上面的基本配置，还可以根据具体项目的需求进行更高级的配置，例如压缩文件体积、生成 source map 等。具体的配置项可以参考 Vite 的文档。