引言
前端开发需要使用许多工具，编译器和打包工具是其中重要的两个。让我们深入了解这些工具。
编译器
编译器负责将输入代码转换为某种目标输出格式。为了保证 ECMAscript 和 TypeScript 转换成特定版本的 ECMAscript 来适配更多的浏览器，往往通过编译器来进行转换。
| 名称 | 描述 | 语言 | 速度 | 成熟度 |
|---|---|---|---|---|
| tsc | TS 官方编译器 | TS | slow | 非常成熟 |
| esbuild | 快速 JS/TS 编译器 | Go | fast | 可以 |
| swc | 快速 JS/TS 编译器 | Rust | fast | 可以 |
| babel | JS 编译器（TS 插件） | JS | slow | 非常成熟 |
- esbuild 旨在快速构建 JavaScript 代码，并且是目前最快的 JavaScript 编译器之一。它使用 Go 编写，具有高效的并发编译和构建能力，可以快速处理大型项目。esbuild 支持最新的 ECMAScript 特性，并且可以将多个文件打包成一个文件以优化加载速度。
- Babel 的目标是将较旧的 JavaScript 代码转换为向后兼容的版本，以确保在更多的浏览器中运行。它可以将最新的 ECMAScript 特性转换为旧版本的 JavaScript 代码，以确保在不支持最新特性的浏览器中运行。Babel 也支持插件和预设，可以扩展其功能并自定义转换过程。
- swc 是另一个 JavaScript 编译器，类似于 Babel 和 esbuild，但具有更高的性能和更好的兼容性。 swc 使用 Rust 编写，其设计目标是为了提供与 Babel 相同的功能，并以比 Babel 更快的速度进行编译。与 Babel 不同的是，swc 也支持 TypeScript 和 JSX，这使得它在编译 React 应用程序时非常有用。与 esbuild 不同，swc 不仅关注速度，还关注兼容性。它支持的 ECMAScript 版本与 Babel 相同，并且可以处理常见的 Babel 插件和预设。
- tsc 是 TypeScript 的编译器，用于将 TypeScript 代码编译成 JavaScript 代码。与 Babel、esbuild 和 swc 不同，tsc 是专门为 TypeScript 语言设计的编译器。
esbuild 适用于需要快速编译和打包 JavaScript 代码的项目，而 Babel 更适合需要将最新的 ECMAScript 特性转换为向后兼容的 JavaScript 代码的项目。如果你需要一个更快、更兼容的 JavaScript 编译器，并且需要处理 TypeScript 和 JSX，那么 swc 是一个不错的选择。
SWC vs esbuild
swc 和 esbuild 都是非常优秀的、非常快的开源 JS / TS 编译器。它们的性能相当，并被一些世界上最大的公司经常用于生产环境。
使用 swc 的工具库：
- Vercel and Next.js
- Deno’s linter, formatter, and docs
- Parcel 使用 esbuild 的工具库：
- Vite
- Nuxt.js
- tsup
打包器
打包器负责将所有的输入源文件打包成易于使用的输出格式。打包程序最常见的两个用例是为 web 应用打包资源和打包成库文件。
| 名称 | 描述 | 适用 |
|---|---|---|
| Webpack | 行业标准打包器 | web 应用、库 |
| Rollup | 针对库打包器 | 库 |
| Parcel | 零配置 web 构建工具 | web 应用、库 |
webpack 和 rollup 这样的打包工具是现代 JS 工具链的 “瑞士军刀”。 它们都具有极强的可扩展性，具有维护良好的插件，覆盖了大多数主要用例。
Parcel 提供了一种几乎为零配置的打包方法。它关注的是简单性而不是可扩展性，并在底层使用 **esbuild **作为编译器。
swc 和 esbuild 也都提供了基本的打包功能，与这些打包器相比，它们的功能还不够全
开发库/构建工具
旨在帮助库作者打包和发布现代的 NPM 包。
| 名称 | 描述 | 编译器 | 打包器 |
|---|---|---|---|
| tsup | 由 esbuild 支持的快速 TS 库打包器 | esbuild | rollup |
| tsdx | 用于 TS 包开发的零配置 CLI | babel | rollup |
| microbundle | 用于微小模块的零配置打包器 | babel | rollup |
| Vite | 下一代前端工具(库模式) | esbuild | rollup |
| preconstruct | 在 monorepos 中轻松开发和构建代码 | babel | rollup |
| unbuild | 统一的 javascript 构建系统 | esbuild | rollup |
| Bunchee | 提供比 Next.js 更灵活的构建方案 | swc | rollup |
