切换构建工具为vite后，业务项目构建提示找不到rd-component模块

1. 组件库package.json入口配置错误 #

vite构建组件库后，产物默认输出在dist目录，必须确保package.json里的入口字段正确指向构建文件，现代构建工具优先读取exports字段，建议同时配置main/module/types兼容不同场景：

{
  "main": "./dist/rd-component.umd.js",
  "module": "./dist/rd-component.es.js",
  "types": "./dist/index.d.ts",
  "exports": {
    ".": {
      "import": "./dist/rd-component.es.js",
      "require": "./dist/rd-component.umd.js",
      "types": "./dist/index.d.ts"
    }
  }
}

如果缺失exports或路径指向错误，webpack/vite这类工具会找不到组件库的正确入口。

2. vite.config.ts未启用lib模式 #

vite默认是构建应用的模式，必须手动配置lib模式才能生成符合组件库规范的产物：

import { defineConfig } from 'vite';
import { resolve } from 'path';

export default defineConfig({
  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.ts'), // 组件库的根入口文件
      name: 'RdComponent', // umd/iife模式下的全局变量名
      fileName: (format) => `rd-component.${format}.js`, // 输出文件名规则
      formats: ['es', 'umd'] // 按需选择构建格式
    },
    rollupOptions: {
      // 排除react、react-dom这类业务项目已安装的依赖，避免重复打包
      external: ['react', 'react-dom'],
      output: {
        // umd模式下为外部依赖指定全局变量
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM'
        }
      }
    }
  }
});

如果未配置lib字段，构建产物是应用格式，无法被业务项目作为组件库引用。

3. 未生成组件库构建产物 #

切换到vite后，必须先在组件库目录执行构建命令生成dist产物：

cd rd-component
npm run build

本地开发用npm link的话，要确保link的是已完成构建的组件库目录，并且每次修改组件库后重新构建。

4. 业务项目依赖引用问题 #

• 本地开发场景：确认组件库已执行npm link，业务项目已执行npm link rd-component
• 线上依赖场景：确保业务项目安装的是组件库的最新版本（包含vite构建的dist产物）

5. 验证构建产物完整性 #

检查组件库的dist目录，确认是否生成了配置中指定的js文件和类型声明文件（如果用TS），如果没有，查看vite构建日志排查错误。

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