前端常见的 编译工具 和 打包工具（bundler） 可以大致分为以下几类（包含主流工具和新兴工具）：
🚀 一、前端编译工具（Compiler）
这些工具主要把源代码（如 TypeScript、Sass、ES6+）转成浏览器能识别的代码。
| 工具 | 说明 |
|---|---|
| Babel | 把 ES6+/JSX 转换成兼容旧浏览器的 JS（最常见） |
| TypeScript (tsc) | 把 .ts 文件编译成 .js |
| Sass / Less / Stylus | 预处理 CSS，增加变量、嵌套等功能 |
| PostCSS | CSS 转换工具，如 autoprefixer、tailwind 插件等 |
| SWC | 用 Rust 编写，替代 Babel，速度极快 |
| esbuild | Go 编写的超快编译器，也能打包（集编译和打包于一体） |
| Vite | 默认用 esbuild 做开发时编译，build 阶段用 Rollup |
📦 二、打包工具（Bundler）
主要把 JS、CSS、图片等打包成浏览器可用的文件。
| 工具 | 特点 |
|---|---|
| Webpack | 最通用，功能丰富、生态庞大，配置稍复杂 |
| Rollup | 专注构建库，打包输出体积小，Tree shaking 强 |
| Parcel | 零配置、自动处理依赖，适合中小项目 |
| Vite | 开发快（基于 esbuild），构建用 Rollup |
| esbuild | 超高速打包器，适合构建工具、CLI、微前端场景 |
| Rspack | 阿里开发，用 Rust 写的 Webpack 替代品，兼容 Webpack 配置但性能更优 |
| Turbopack | Vercel 出品，下一代 Webpack 替代品（还在发展中） |
| Snowpack（已过时） | 最早的基于 ESM 的构建工具，已被 Vite 替代 |
🧱 三、打包+构建工具（全家桶式）
这些工具集成了 打包、热更新、构建优化、编译 等功能，通常是现代前端项目的入口工具。
| 工具 | 描述 |
|---|---|
| Vite | 现代开发首选，快、简洁，生态活跃（Vue、React 都支持） |
| Next.js | React 全栈框架，内置打包、SSR、API 路由 |
| Nuxt.js | Vue 的全栈框架，类似 Next.js |
| Astro | 构建静态站点、可集成 Vue/React/Svelte |
| Remix / Redwood / Qwik | 新兴 React 全栈工具，支持 SSR、流式渲染等新特性 |
✅ 总结建议
| 场景 | 推荐工具 |
|---|---|
| 企业项目通用 | Webpack（老项目）或 Vite（新项目） |
| 快速开发和构建 | Vite + esbuild / SWC |
| 打包库（npm 包） | Rollup / tsup / unbuild |
| SSR / 全栈开发 | Next.js（React）或 Nuxt.js（Vue） |
| 极致构建性能 | Rspack / Turbopack（未来趋势） |
