如何配置tsup实现React UI库单入口按需导出以避免冗余代码引入

我太懂你这种困扰了——手动改dist文件虽然能临时解决问题，但每次打包都要重复操作实在太麻烦了！其实tsup完全可以自动生成这种「中转导出」的根index.js，不用再手动修改，而且能完美实现按需加载，不会把冗余代码打包进你的项目里。

核心思路 #

我们需要把tsup的配置拆分成两部分：

1. 让各个组件入口正常打包成独立的、包含自身代码的文件（保持你原来的组件打包逻辑）
2. 让根入口index.ts只做导出转发，不把组件代码打包进去，而是保留export * from './components/xxx'这类引用式导出

具体配置步骤 #

1. 修改tsup.config.ts为多配置项

tsup支持传入配置数组，这样我们可以分别处理组件入口和根入口：

import { defineConfig } from "tsup";

export default defineConfig([
  // 配置1：处理各个组件的独立打包（和你原来的组件打包逻辑一致）
  {
    entry: ["src/components/**/index.tsx"],
    dts: true, // 生成类型定义
    bundle: true, // 组件代码单独打包
    splitting: false,
    sourcemap: true,
    minify: true,
    clean: true, // 打包前清理dist目录（只在第一个配置里设true，避免重复清理）
    format: ["esm"],
    external: ["react", "react-dom"], // 不打包React相关依赖
    treeshake: true,
  },
  // 配置2：处理根入口，仅转译不打包，保留导出引用
  {
    entry: ["src/index.ts"],
    dts: true, // 同步生成根入口的类型定义
    bundle: false, // 关键！关闭打包，只转译文件，保留原导出结构
    splitting: false,
    sourcemap: true,
    minify: true,
    clean: false, // 不要重复清理dist
    format: ["esm"],
    external: ["react", "react-dom"],
    treeshake: true,
  },
]);

2. 确保src/index.ts的内容是转发导出

你的根入口文件src/index.ts要保持是组件的转发导出，不要直接导入组件再导出（当然直接导出也可以，但export *更简洁）：

// src/index.ts
export * from "./components/button";
export * from "./components/card";
// 其他组件同理

3. 验证打包结果

现在运行tsup打包后，你的dist/index.js就会自动生成类似这样的内容：

// dist/index.js
export * from "./components/button/index.js";
export * from "./components/card/index.js";

完全和你手动修改的效果一样！而且类型定义文件dist/index.d.ts也会同步生成对应的转发导出。

4. 完善package.json的导出配置

为了让两种导入方式都能正常工作（根导入和组件路径导入），你可以保持原来的exports配置：

{
  "exports": {
    ".": "./dist/index.js",
    "./button": "./dist/components/button/index.js",
    "./card": "./dist/components/card/index.js",
    "./dist/*": "./dist/*"
  },
  "typesVersions": {
    "*": {
      ".": ["./dist/index.d.ts"],
      "button": ["./dist/components/button/index.d.ts"],
      "card": ["./dist/components/card/index.d.ts"]
    }
  }
}

为什么这样能解决冗余代码问题？ #

现在根入口的index.js只是一个「导出转发器」，没有包含任何组件的实际代码。当你的项目里用import { Button } from 'my-ui-library'时，打包工具（比如Webpack、Vite）会解析这个导出语句，自动只加载Button对应的文件，不会把Card的代码也拉进来——完美实现按需加载！

额外注意事项 #

• 确保使用UI库的项目开启了Tree Shaking：Webpack生产模式、Vite默认都已经开启，这个是按需加载的前提。
• 不要在根入口src/index.ts里写组件的具体实现逻辑，保持只做转发导出。
• 测试时可以用打包工具的分析功能（比如Webpack Bundle Analyzer）验证，确实没有引入冗余代码。

内容来源于stack exchange