使用 tsup 快速打包 TS 项目

超越 tsc：用 tsup 实现极速 TypeScript 构建

TypeScript 是当今前端开发中炙手可热的技术，为 JavaScript 提供类型安全和面向对象编程的强大功能。构建和打包 TypeScript 项目是开发生命周期中不可或缺的环节，它使代码可用于浏览器或其他环境。

传统的构建工具：速度不够快

传统的构建工具，如 tsc，虽然功能强大，但在速度方面却让人望而却步。随着项目规模的不断扩大，构建时间会呈指数级增加，成为开发过程中的瓶颈。

tsup：基于 esbuild 的闪电构建工具

tsup 的出现犹如一束曙光，它是一款基于 esbuild 的极速 TypeScript 构建工具，其打包速度比 tsc 快了 100 多倍。esbuild 是一个由 Go 语言编写的 JavaScript 构建工具，以其闪电般的速度和对 TypeScript 的一流支持而闻名。

轻松上手：简洁配置

tsup 的配置文件通常为 tsup.config.js，放置在项目根目录下。该配置文件用于指定构建配置，如输入文件、输出目录、模块类型等。其配置选项简单易用，即使是新手开发者也能快速上手。

示例配置文件

const tsup = {
  // 输入文件
  entry: ['src/main.ts'],

  // 输出目录
  outDir: 'dist',

  // 模块类型
  format: ['cjs', 'esm'],
};

export default tsup;

灵活配置：满足你的需求

tsup 提供了丰富的配置选项，可以根据需要进行灵活配置。这些选项包括：

• entry： 指定要构建的输入文件。
• outDir： 指定构建后的输出目录。
• format： 指定要输出的模块类型，如 cjs（CommonJS）和 esm（ES modules）。
• target： 指定要支持的目标环境，如 es2015 或 esnext。
• sourcemap： 是否生成 sourcemap。
• external： 指定需要外部引入的依赖项。
• plugins： 允许添加额外的插件来扩展 tsup 的功能。

构建：一键启动

配置好 tsup.config.js 后，只需使用以下命令即可构建项目：

npx tsup

tsup 会根据配置项进行构建，并将输出文件生成到指定的输出目录中。

优点：极速构建，高效开发

使用 tsup 构建 TypeScript 项目具有以下优点：

• 极速构建： 基于 esbuild，构建速度远超 tsc，节省宝贵时间。
• 简单易用： 配置文件简洁明了，上手容易，无需花费大量时间学习。
• 灵活配置： 提供了丰富的配置选项，可以根据项目需求进行灵活配置。
• 支持多种模块类型： 支持输出多种模块类型，满足不同场景的需要。
• 强大的插件系统： 允许添加插件来扩展 tsup 的功能，满足更多需求。

总结：加速构建，释放效率

tsup 是一款功能强大、使用简单的 TS 构建工具，其极速的构建速度和灵活的配置选项使其成为前端开发人员构建 TS 项目的绝佳选择。通过使用 tsup，开发者可以显著提升构建效率，加速开发进度，释放更多时间和精力专注于核心业务。

常见问题解答

Q1：tsup 与 tsc 相比有多快？

A1：tsup 的构建速度比 tsc 快 100 多倍，极大地缩短了构建时间。

Q2：tsup 支持哪些模块类型？

A2：tsup 支持输出多种模块类型，包括 CommonJS（cjs）和 ES modules（esm）。

Q3：tsup 是否支持 TypeScript 的最新特性？

A3：是的，tsup 持续更新以支持 TypeScript 的最新特性，确保开发者能够使用最新的语言功能。

Q4：tsup 如何扩展功能？

A4：tsup 提供了一个强大的插件系统，允许开发者添加插件来扩展其功能，满足更多需求。

Q5：如何安装 tsup？

A5：可以通过 npm 或 yarn 安装 tsup：

npm install tsup --save-dev