如何在Vite构建React库时包含私有内部包的类型定义？

1. 配置my-react-lib的tsconfig.json #

添加以下编译选项，让TypeScript生成声明时自动内嵌依赖类型：

{
  "compilerOptions": {
    "declaration": true,
    "declarationDir": "./dist/types",
    "isolatedModules": false,
    "preserveSymlinks": false,
    "skipLibCheck": true,
    // 映射内部包路径，确保TS能解析到源码类型
    "paths": {
      "@packages/internal": ["../internal/src"]
    }
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

2. 使用rollup-plugin-dts处理声明合并 #

Vite默认不会合并依赖类型，需要借助这个插件实现内嵌：

安装依赖 #

npm install rollup-plugin-dts --save-dev

修改vite.config.js #

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dts from 'rollup-plugin-dts';

export default defineConfig({
  plugins: [react()],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyReactLib',
      formats: ['es', 'umd'],
      fileName: (format) => `my-react-lib.${format}.js`
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: { react: 'React', reactDOM: 'ReactDOM' }
      },
      plugins: [
        dts({
          entry: 'src/index.ts',
          output: { file: 'dist/types/index.d.ts' },
          // 强制内嵌所有依赖类型，忽略外部标记
          respectExternal: false
        })
      ]
    }
  }
});

3. 验证效果 #

执行构建后，dist/types/index.d.ts会直接包含InternalType的完整定义：

export interface InternalType {
  foo: bar; // 此处bar需替换为实际类型
}

额外注意 #

• 确保internal包的tsconfig.json开启了declaration: true，否则TS无法识别其类型
• monorepo中把internal设为my-react-lib的devDependencies，避免被打包进产物

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