tsup for TypeScript: 完整指南与示例

\n\n

1. 什么是 tsup 以及为什么需要它

\n tsup 是一个基于 esbuild 构建的现代、快速且易于使用的 TypeScript 打包工具 (bundler)。它的主要任务是将您的 TypeScript 库打包成一个或多个文件，以便发布到 npm 或在其他项目中使用。与 Webpack 或 Rollup 的复杂配置不同，tsup 在大多数情况下提供“开箱即用”的零配置方案。\n

\n 为什么需要 tsup？在开发 TypeScript 库时，您会遇到几个问题：需要将 TypeScript 编译为 JavaScript，生成类型声明文件 (.d.ts)，将多个文件合并为一个 (bundle) 以便使用，并为不同的模块格式 (CommonJS, ESM) 进行构建。tsup 通过一条命令即可解决所有这些任务。它会自动处理导入、可选地压缩代码、生成 source map 并支持 tree-shaking。\n

\n tsup 非常适合用于：创建 npm 包、工具库、React/Vue 组件、API 客户端以及任何需要快速简单构建 TypeScript 的项目。由于使用了 esbuild，tsup 的运行速度比传统打包工具快 10-100 倍，这在大型项目中尤为明显。\n

\n\n

2. 安装

tsup 通过 npm 或 yarn 作为开发依赖安装：

# npm\nnpm install --save-dev tsup\n\n# yarn\nyarn add --dev tsup\n\n# pnpm\npnpm add --save-dev tsup

安装后，您可以通过 npx 运行 tsup，或将其添加到 package.json 的脚本中。

\n\n

3. 快速入门 — 最小工作示例

让我们创建一个简单的库并使用 tsup 进行构建。

步骤 1: 创建文件 src/index.ts：

// src/index.ts\nexport function greet(name: string): string {\n    return `Hello, ${name}! Welcome to tsup.`;\n}\n\nexport function add(a: number, b: number): number {\n    return a + b;\n}

步骤 2: 创建配置文件 tsup.config.ts (或使用命令行参数)：

// tsup.config.ts\nimport { defineConfig } from 'tsup';\n\nexport default defineConfig({\n    entry: ['src/index.ts'],        // 入口点\n    format: ['cjs', 'esm'],         // 输出格式\n    dts: true,                      // 生成 .d.ts 文件\n    splitting: false,               // 不分割成代码块\n    sourcemap: true,                // 生成 source map\n    clean: true,                    // 构建前清理 dist 文件夹\n});

步骤 3: 在 package.json 中添加脚本：

{\n    "scripts": {\n        "build": "tsup"\n    }\n}

步骤 4: 运行构建：

npm run build

结果将出现在 dist/ 文件夹中：

dist/\n├── index.js          (CommonJS)\n├── index.mjs         (ESM)\n├── index.d.ts        (类型声明)\n├── index.d.mts       (ESM 声明)\n└── index.js.map      (source map)

\n\n