为什么选择 tsup?

前端构建工具技术选型：为什么选择 tsup？

目录

1. 什么是 tsup？
2. 核心优势
3. 与其他工具对比
4. 适用场景
5. 快速配置示例
6. 何时不推荐使用 tsup？
7. 总结

---

1. 什么是 tsup？

tsup 是一个零配置的 TypeScript 构建工具，基于 esbuild 实现。它能快速打包 TypeScript/JavaScript 代码，自动生成类型声明文件（.d.ts），并支持输出多种模块格式（ESM、CJS、IIFE）。

---

2. 核心优势

特性	说明
⚡ 极速构建	基于 esbuild，比传统工具快 10~100 倍
🚀 零配置	开箱即用 TypeScript，无需配置 Loader/Plugin
📦 类型声明生成	通过 --dts 参数一键生成 .d.ts 文件
🔄 多格式支持	同时输出 ESM、CJS 等格式，适配不同环境
🛠 开发友好	内置监听模式（--watch）、代码压缩（--minify）

---

3. 与其他工具对比

3.1 功能对比表

工具	构建速度	配置复杂度	类型生成	多格式输出	适用场景
tsup	⚡️ 极快	无	✅ 自动	✅ 支持	库、CLI 工具
esbuild	⚡️ 极快	中	❌ 需插件	✅ 支持	底层工具链
rollup	🏃 较快	中	✅ 需插件	✅ 支持	复杂库打包
webpack	🐢 较慢	高	❌ 需配置	✅ 支持	企业级应用

3.2 配置对比示例

tsup 配置

// tsup.config.ts
export default {
  entry: ["src/index.ts"], // 入口文件
  format: ["esm", "cjs"],  // 输出格式
  dts: true,               // 生成类型声明
  clean: true,             // 清理旧文件
};

运行命令：

tsup

等效的 Rollup 配置

// rollup.config.js
import typescript from '@rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';

export default [
  {
    input: 'src/index.ts',
    output: [
      { file: 'dist/index.esm.js', format: 'esm' },
      { file: 'dist/index.cjs.js', format: 'cjs' }
    ],
    plugins: [typescript()]
  },
  {
    input: 'src/index.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    plugins: [dts()]
  }
];

运行命令：

rollup -c

4. 适用场景

✅ 推荐使用

• 开发 TypeScript 库：快速生成类型声明和多格式模块。
• CLI 工具打包：轻量级输出，无需复杂优化。
• 原型验证：零配置快速验证想法。

❌ 不推荐使用

• 复杂前端应用：需要代码分割、静态资源处理时，选择 Vite/Webpack。
• 深度定制构建流程：需精细控制打包步骤时，选择 Rollup/esbuild。

5. 快速配置示例

5.1 基础场景：打包 TypeScript 库

# 安装
npm install tsup --save-dev

# 配置
npx tsup src/index.ts --format esm,cjs --dts

5.2 进阶场景：监听模式 + 代码压缩

npx tsup src/index.ts --watch --minify

6. 何时不推荐使用 tsup？

场景	替代方案	理由
需要处理 CSS/图片	Vite、Webpack	tsup 不擅长静态资源处理
需要代码分割和懒加载	Rollup、Webpack	tsup 不支持应用级优化
需要自定义插件扩展	esbuild、Rollup	tsup 插件生态较新，功能有限

7. 总结

选择 tsup 如果：

• 你正在开发一个 TypeScript 库或 CLI 工具。
• 你希望零配置、极速完成打包。
• 你需要自动生成类型声明文件。

避免 tsup 如果：

• 项目需要处理复杂资源（CSS、图片）。
• 需要深度定制构建流程或使用特定插件。

👉 终极建议：对于 90% 的库和工具场景，tsup 是更高效的选择！