基于Vite的UI库如何实现特定组件的精准导入？

我正在用Vite开发UI库，希望支持@projectname/ui/Buttons/CertainButton这类路径单独导入特定组件，而非整体导入@projectname/ui。

之前尝试在每个组件文件夹下配置独立的index.ts，并将src/根目录的index.ts留空，但导致Vite无法正确生成dist/库文件。试过rollup-plugin-multi-input插件，但它不支持项目必需的TypeScript。

想咨询：是否有支持TypeScript的方案实现这种导入结构？还是必须改用单index.ts做整体导入？需要符合TypeScript要求的解决方案或替代建议。

当前vite.config.ts配置：

/// <reference types="vitest" />
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import viteTsConfigPaths from "vite-tsconfig-paths";
import dts from "vite-plugin-dts";
import { joinPathFragments } from "@nx/devkit";
import svgr from "vite-plugin-svgr";


export default defineConfig({
  cacheDir: "../../node_modules/.vite/ui",

  plugins: [
    dts({
      entryRoot: "src",
      tsConfigFilePath: joinPathFragments(__dirname, "tsconfig.lib.json"),
      skipDiagnostics: true
    }),
    react(),
    viteTsConfigPaths({
      root: "../../"
    }),
    svgr()
  ],

  // Uncomment this if you are using workers.
  // worker: {
  //  plugins: [
  //    viteTsConfigPaths({
  //      root: '../../',
  //    }),
  //  ],
  // },

  // Configuration for building your library.
  // See: https://vitejs.dev/guide/build.html#library-mode
  build: {
    lib: {
      // Could also be a dictionary or array of multiple entry points.
      entry: "src/index.ts",
      name: "ui",
      fileName: "index",
      // Change this to the formats you want to support.
      // Don't forgot to update your package.json as well.
      formats: ["es", "cjs"]
    },
    rollupOptions: {
      // External packages that should not be bundled into your library.
      external: ["react", "react-dom", "react/jsx-runtime"]
    }
  }
});

方案一：Vite原生多入口构建（完全兼容TypeScript） #

Vite本身支持多入口构建，无需依赖第三方插件，可直接实现路径式组件导入，步骤如下：

1. 修改Vite多入口配置 #

更新vite.config.ts中的build.lib和rollupOptions，配置多入口并保留目录结构：

build: {
  lib: {
    // 多入口映射：键为导出路径，值为源码入口文件
    entry: {
      'Buttons/CertainButton': 'src/Buttons/CertainButton/index.ts',
      'Inputs/TextInput': 'src/Inputs/TextInput/index.ts',
      // 其他组件依次添加
      // 可选：保留根入口以支持整体导入
      index: 'src/index.ts'
    },
    name: 'ui',
    // 按入口路径生成对应格式的文件
    fileName: (format, entryName) => `${entryName}.${format === 'es' ? 'mjs' : 'cjs'}`,
    formats: ['es', 'cjs']
  },
  rollupOptions: {
    external: ['react', 'react-dom', 'react/jsx-runtime'],
    output: {
      // 保留模块结构，确保输出目录与源码对应
      preserveModules: true,
      preserveModulesRoot: 'src'
    }
  }
}

2. 配置组件导出与package.json #

• 组件目录规范：每个组件文件夹下的index.ts导出对应组件，例如src/Buttons/CertainButton/index.ts：

  export { default as CertainButton } from './CertainButton';
  

• 根src/index.ts：无需留空，可导出所有组件以支持整体导入（可选）：

  export * from './Buttons/CertainButton';
  export * from './Inputs/TextInput';
  

• package.json关键配置：添加exports和typesVersions字段，让TypeScript和Node.js识别路径导入：

  {
    "name": "@projectname/ui",
    "main": "./dist/index.cjs",
    "module": "./dist/index.mjs",
    "types": "./dist/index.d.ts",
    "exports": {
      ".": {
        "import": "./dist/index.mjs",
        "require": "./dist/index.cjs",
        "types": "./dist/index.d.ts"
      },
      "./Buttons/CertainButton": {
        "import": "./dist/Buttons/CertainButton.mjs",
        "require": "./dist/Buttons/CertainButton.cjs",
        "types": "./dist/Buttons/CertainButton.d.ts"
      },
      "./Inputs/TextInput": {
        "import": "./dist/Inputs/TextInput.mjs",
        "require": "./dist/Inputs/TextInput.cjs",
        "types": "./dist/Inputs/TextInput.d.ts"
      },
      "./package.json": "./package.json"
    },
    "typesVersions": {
      "*": {
        "Buttons/CertainButton": ["dist/Buttons/CertainButton.d.ts"],
        "Inputs/TextInput": ["dist/Inputs/TextInput.d.ts"]
      }
    }
  }
  

3. 调整vite-plugin-dts配置 #

确保类型文件与源码结构一致：

dts({
  entryRoot: 'src',
  tsConfigFilePath: joinPathFragments(__dirname, 'tsconfig.lib.json'),
  // 生成与输出目录匹配的类型文件
  outputDir: 'dist',
  // 开发阶段建议关闭跳过诊断，确保类型正确
  skipDiagnostics: false
})

方案二：单入口+Tree Shaking（替代方案） #

如果多入口配置过于繁琐，可保留单src/index.ts导出所有组件，通过Tree Shaking实现按需加载：

• 在package.json中设置"sideEffects": false，让打包工具自动剔除未使用的组件
• 用户导入写法为import { CertainButton } from '@projectname/ui'，打包工具会只打包该组件
• 缺点：无法实现@projectname/ui/Buttons/CertainButton路径式导入，但能达到按需加载效果

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