模块打包器

浏览器能执行 ES Module，但生产项目仍有成百上千个文件、TypeScript、JSX、CSS 预处理——模块打包器（bundler） 把源码图编译、合并、优化成可部署的产物。

学习目标

• 说清 bundler 的四大职责：解析、转换、打包、优化
• 区分开发服务器与生产构建
• 对照路线图 module-bundlers 节点

bundler 做什么

入口 app/main.tsx
    → 静态分析 import 图
    → 经 loader/plugin 转 TS/JSX/SASS
    → 打包 chunk（代码分割）
    → 压缩、tree-shaking、hash 文件名
    → dist/ 或 .next/

阶段	目标
开发	快速启动、HMR 热更新
生产	体积小、缓存友好、按需加载

常见打包器定位

工具	典型场景
Webpack	历史项目、复杂 loader 链、企业定制
Vite	现代 SPA/SSR 开发体验（见 ft-vite）
Rollup	库打包、Tree-shaking 精细（见 ft-rollup）
esbuild / SWC	极速转译，常作底层引擎
Next.js 内置	应用框架自带，抽象大部分配置

与 javascript-core 模块系统

js-modules 教你在源码里写 import；bundler 决定：

• 如何把 node_modules 打进来
• 是否支持 import.meta.url、动态 import()
• 如何把 CSS、图片当模块处理

与 react / next 的关系

• react-essentials：npm create vite 默认用 Vite + Rollup（生产）
• nextjs-essentials：不手写 webpack 配置，框架封装 Turbopack/Webpack
• typescript-essentials：.tsx 由 bundler 或 tsc 处理——Next 常交给 SWC/esbuild

选型直觉

• 应用：优先框架自带或 Vite
• npm 库：Rollup / tsup
• 遗留 Webpack 项目：渐进迁移，别一次性重写

练习

• 跑 npm run build，打开 dist 或 .next，看产物文件名与体积
• 在 Network 面板看生产站是否加载多个 chunk-*.js
• 用一句话解释 HMR 与 full reload 的区别

小结

bundler 把「开发时的模块图」变成「浏览器/Node 能跑的 bundle」。 下一课聚焦 Vite 与 esbuild/SWC 如何做到极速开发体验。