如何在Vite React类库中配置子模块路径实现分模块导入

我有一个基于Vite的React类库，当前导入方式是：

import { Button, Typography, Box, Flex, Color, TypographyVariant } from '@placeholder-library';

希望拆分成子模块导入：

import { Button, Typography, Box, Flex } from '@placeholder-library/components';
import { Color, TypographyVariant } from '@placeholder-library/shared';

现有目录结构、vite.config.ts、package.json等配置如上，尝试过修改入口但未成功，求具体配置方案。

步骤1：确认目录结构（保持现有结构即可） #

确保每个子模块都有独立的index.ts统一导出内容：

src
├── index.ts          # 根入口（可选，保留全量导出兼容旧代码）
├── components
│   ├── index.ts      # 导出所有组件
│   └── Button
│       └── index.ts
└── shared
    ├── index.ts      # 导出所有共享内容
    └── hooks
        └── ...

src/components/index.ts示例：

export * from './Button';
export * from './Typography'; // 其他组件同理

src/shared/index.ts示例：

export * from './Color';
export * from './TypographyVariant';
export * from './hooks'; // 导出hooks等共享工具

步骤2：修改Vite配置（vite.config.ts） #

配置多入口构建，让Vite分别打包根模块、components、shared三个入口：

import react from '@vitejs/plugin-react';
import path from 'path';
import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import svgr from 'vite-plugin-svgr';
import tsconfigPaths from 'vite-tsconfig-paths';
import commonjs from 'vite-plugin-commonjs';

export default defineConfig({
  resolve: {
    alias: {
      src: path.resolve(__dirname, './src'),
    },
  },
  build: {
    outDir: 'build',
    // 配置多入口，key对应最终生成的文件名
    lib: {
      entry: {
        index: './src/index.ts',
        components: './src/components/index.ts',
        shared: './src/shared/index.ts',
      },
      name: 'Placeholder Library',
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: [
        // UMD格式（可选，用于全局引入场景）
        {
          format: 'umd',
          globals: {
            react: 'React',
            'react-dom': 'ReactDOM',
          },
          dir: 'build/umd',
        },
        // CommonJS格式
        {
          format: 'cjs',
          globals: {
            react: 'React',
            'react-dom': 'ReactDOM',
          },
          dir: 'build/cjs',
          entryFileNames: '[name].js',
        },
        // ESModule格式
        {
          format: 'esm',
          globals: {
            react: 'React',
            'react-dom': 'ReactDOM',
          },
          dir: 'build/esm',
          entryFileNames: '[name].mjs',
        },
      ],
    },
    sourcemap: true,
    emptyOutDir: true,
  },
  plugins: [
    svgr(),
    react(),
    commonjs(),
    tsconfigPaths(),
    dts({
      outDir: ['build/cjs', 'build/esm', 'build/umd'],
      include: ['./src/**/*'],
      exclude: ['**/*.stories.*'],
      tsconfigPath: './tsconfig.json',
    }),
  ],
});

步骤3：调整package.json配置 #

核心是添加exports字段，明确子模块的入口映射，同时修正其他字段：

{
  "name": "@placeholder-library",
  "version": "0.0.26",
  "description": "Placeholder Library components library",
  "license": "ISC",
  "main": "build/cjs/index.js",
  "module": "build/esm/index.mjs",
  "types": "build/cjs/index.d.ts",
  // 关键：配置子模块的导出路径，支持import/require/类型三种场景
  "exports": {
    ".": {
      "import": "./build/esm/index.mjs",
      "require": "./build/cjs/index.js",
      "types": "./build/cjs/index.d.ts"
    },
    "./components": {
      "import": "./build/esm/components.mjs",
      "require": "./build/cjs/components.js",
      "types": "./build/cjs/components.d.ts"
    },
    "./shared": {
      "import": "./build/esm/shared.mjs",
      "require": "./build/cjs/shared.js",
      "types": "./build/cjs/shared.d.ts"
    }
  },
  // 只打包必要文件，避免冗余
  "files": [
    "build"
  ],
  "scripts": {
    "build": "vite build", // 移除tsc，由dts插件生成类型声明
    "build-storybook": "storybook build",
    "build-storybook-docs": "storybook build --docs",
    "dev": "vite",
    "format": "prettier --write .",
    "lint:fix": "eslint . --fix --ignore-path .gitignore",
    "prepare": "husky install",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "storybook-docs": "storybook dev --docs"
  },
  "dependencies": {
    "..."
  },
  "devDependencies": {
    "..."
  },
  "peerDependencies": {
    "react": "^18.2.0"
  }
}

步骤4：TypeScript配置（tsconfig.json） #

确保生成正确的类型声明，添加以下关键配置：

{
  "compilerOptions": {
    "declaration": true,
    "declarationMap": true,
    "outDir": "./build",
    "rootDir": "./src",
    // 其他原有配置...
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "build", "**/*.stories.*"]
}

步骤5：验证配置 #

1. 执行npm run build，查看build目录结构是否符合预期：

   build
   ├── cjs
   │   ├── index.js、components.js、shared.js
   │   └── 对应的.d.ts类型文件
   ├── esm
   │   ├── index.mjs、components.mjs、shared.mjs
   │   └── 对应的.d.ts类型文件
   └── umd
       ├── index.js、components.js、shared.js
       └── 对应的.d.ts类型文件
   

2. 在测试项目中安装类库，尝试子模块导入：

   import { Button } from '@placeholder-library/components';
   import { Color } from '@placeholder-library/shared';
   

   确认组件/工具可正常使用，且TypeScript类型提示正常。

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