如何配置NX+Vite构建React类库时排除React/React-Dom？

1. 配置类库的Vite构建文件 #

找到类库目录下的vite.config.ts（或.js），在build.rollupOptions中明确指定要排除的依赖：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';

export default defineConfig({
  plugins: [react(), nxViteTsPaths()],
  build: {
    lib: {
      entry: 'src/index.ts', // 替换为你的类库入口文件路径
      name: 'your-library-name',
      formats: ['es', 'cjs'], // 根据需求调整输出格式
      fileName: (format) => `your-library-name.${format}.js`,
    },
    rollupOptions: {
      // 强制排除React和React-Dom，由宿主项目提供
      external: ['react', 'react-dom'],
      output: {
        // 可选：若类库有全局变量使用场景，配置全局变量映射
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

2. 确认NX项目配置无冲突 #

检查类库目录下的project.json，确保targets.build.options中没有覆盖Vite的external设置：

• 避免存在强制包含依赖的额外打包参数
• 若使用NX预设构建配置，确认它不会自动将peerDependencies纳入打包范围

3. 校验peerDependencies配置 #

确保类库的package.json中peerDependencies版本范围配置合理，同时将React/React-Dom保留在devDependencies以支持本地开发：

{
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  },
  "devDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
    // 其他开发依赖...
  }
}

4. 重新执行打包并验证 #

运行打包命令：

nx build --production <library-name>

之后查看dist/libs/<library-name>下的产物文件，搜索React或ReactDOM，确认未被打包进产物。若问题仍存在，可先清理NX缓存再重试：

nx reset
nx build --production <library-name>

内容的提问来源于stack exchange，提问作者alexahdp