如果你想要最符合情况，包括电池的方式来制作这样的库，那么看看dts-cli。它会工作，但肯定会比tsup慢。我自己正在将一个库从dts-cli切换到tsup，因为构建时间在MacBook Air M1上开始花费太长（大约一分钟）。

下面是一个示例设置。

• 首先，你需要单独捆绑每个组件。你可以使用一个glob作为Tsup的入口点。记住，适用于Esbuild的选项大多数时候也适用于Tsup。

// tsup.config.ts
defineConfig([
  {
  clean: true,
  sourcemap: true,
  tsconfig: path.resolve(__dirname, "./tsconfig.build.json"),
  entry: ["./components/core/!(index).ts?(x)"],
  format: ["esm"],
  outDir: "dist/",
  esbuildOptions(options, context) {
    // the directory structure will be the same as the source
    options.outbase = "./";
    },
  },

• 然后，为了方便起见，你需要一个index.ts，它公开了命名的导出。这个索引有时被称为“桶”文件。

// index.ts
// the actual file is "Button.tsx" but we still want a ".js" here
export { Button } from "./components/core/Button.js";

注意.js扩展。ESM需要显式扩展，因此在最终构建中需要它。
添加.js似乎并没有打扰TypeScript，它仍然可以正确识别Button.tsx中的“Button”类型。在这一点上，我不确定 * 为什么 * 它可以工作，但它确实可以。
传输此索引，不捆绑。

// tsup.config.ts
  {
  clean: true,
  sourcemap: true,
  tsconfig: path.resolve(__dirname, "./tsconfig.build.json"),
  entry: ["index.ts", "./components/core/index.ts"],
  bundle: false,
  format: ["esm"],
  outDir: "dist",
  esbuildOptions(options, context) {
    options.outbase = "./";
    },
  },
])

• 最后像往常一样定义你的package.json：

"sideEffects": false,
  "type": "module",
  "exports": {
    ".": "./dist/index.js"
  },

sideEffects是针对Webpack和Rollup等应用程序捆绑包的非标准属性。将其设置为false会告诉他们该包对于树抖动是安全的。
现在import { Button } from "my-package"应该可以像您期望的那样工作，并且在应用程序级别的树抖动和动态加载成为可能，因为“Button”被捆绑为自己的ES模块Button.js，并且该包被标记为无副作用。
我的Webpack Bundle Analyzer在Next应用程序中证实了这一点：

Before（单个捆绑index.js）：

之后（单独文件意味着我可以更精确地选择我的导入）：

Final config available here（将来可能会改进）

如果tsup需求对你来说不是很重要，我建议使用css-vars-hook repo作为模板。这是我的项目，按照你描述的方式设置。它成功地构建了NPM package。使用Rollup而不是tsup。
所以，你可以用你的代码替换我的代码。代码放在/src/lib/中，演示环境放在/src/environment/中。主要入口点是src/lib/index.ts。