打包工具全景：从 Webpack 到 Rolldown 的设计哲学
Webpack、Rollup、esbuild、Vite、Rolldown——前端打包工具的名单每隔一两年就多一个。直觉上，这像是 JavaScript 社区的造轮子癖。
打包工具, esbuild +2
/**
* 我不知道的 打包工具
* 共 5 篇文章
*/
export const series = {
name : "我不知道的 打包工具" ,
count : 5 ,
guide : "我不知道的打包工具 — 系列导读与阅读路径" ,
description : "《我不知道的 打包工具》系列导读、阅读路径与文章索引。" ,
};
文章数量： 5 篇
根据不同背景选择入口：
如果想系统理解打包工具全貌： 按编号 01 → 05 顺序阅读
如果在开发 TypeScript 库，想快速打包： 重点看 02、03
如果在做组件库开发： 重点看 04，然后回看 01 了解全景
如果在纠结”到底用什么工具”： 直接看 05，再按需回看细节
| # | 文章 | 核心内容 |
|---|---|---|
| 01 | 打包工具全景 — 从 Webpack 到 Rolldown 的设计哲学 | Webpack/Rollup/esbuild/Vite/Rolldown 的设计哲学差异，为什么有这么多打包工具 |
| 02 | esbuild 与 tsup — 零配置极速打包的底层机制 | esbuild 的 Go 并行架构，tsup 的封装层，零配置打包实战 |
| # | 文章 | 核心内容 |
|---|---|---|
| 03 | CJS、ESM、UMD 与 exports 字段 — 模块格式的那些坑 | CJS vs ESM 本质差异、UMD 历史遗产、package.json exports 详解、Dual Package Hazard |
| # | 文章 | 核心内容 |
|---|---|---|
| 04 | Father — 组件库构建工具的设计与实践 | Father 4.x 多引擎架构、Bundless/Bundle 双模式、CSS Modules 样式隔离 |
| 05 | 构建工具选型 — 如何根据项目类型选择打包方案 | 四种项目类型的决策框架、Vite vs Webpack、tsup vs Rollup vs unbuild |
| 关联系列 | 关联点 |
|---|---|
| 浏览器 | 打包后的代码如何被浏览器加载和执行（Browser-01 进程架构、Browser-04 渲染流水线） |
| HTTP | 模块加载涉及的网络请求（HTTP-01 从输入 URL 到页面呈现） |
| V8 | 打包产物的 JS 执行机制（V8-01 执行流程、V8-09 作用域） |
| React | 组件库构建与 React 组件模式（React-08 逻辑复用的三代进化） |
Webpack、Rollup、esbuild、Vite、Rolldown——前端打包工具的名单每隔一两年就多一个。直觉上，这像是 JavaScript 社区的造轮子癖。
一个 TypeScript 库项目，用 Webpack 构建需要 30 秒，换成 tsup 只要 0.5 秒。快了 60 倍。这不是玄学，也不是"优化了配置"的结果——背后是语言级别的架构差异。
你发布了一个 npm 包，TypeScript 编译通过了，本地测试也没问题。用户 require 你的包，报错；换成 import，还是报错。问题出在哪？
用 Webpack 打包一个组件库试试——光处理 ESM、CJS、UMD 三种格式输出，加上 TypeScript 编译、样式文件抽离、外部依赖 externals 配置，webpack.config.js 轻松写到 200 行，还没算上样式隔离和按需加载。
npm init 之后的第一个问题往往不是"写什么业务逻辑"，而是"用什么打包工具"。Webpack、Vite、Rollup、esbuild、tsup、Father、unbuild——名单太长了。网上的"工具对比"文章通常罗列一堆功能矩阵，但不回答那个最实际的问题：你的项目到底…