构建工具应该包含哪些能力？

源码转义

• 支持TypeScript
• 支持 JavaScript 高级语法（ES2022）
• 压缩（模块、语句合并）
• Tree Shaking
• 常量标志（比如 process\.env\.NODE_ENV 、Vite import\.meta\.env\.*的处理）
• 图片压缩、转换（imagemin）
• SVG压缩（svgo）

格式输出

• CommonJS
• ES Module
• UMD

非JavaScript资源处理

• CSS（包括 CSS Modules、Inline 引入、CSS Extract、以 URL 的方式引入；特殊的：PostCSS、TailwindCSS处理等）
• HTML（包括 Inline 载入脚本、外链载入脚本、Preload 图片和字体等、Preload 依赖脚本）
• 依赖（包括产出 CSS 里依赖的三方文件、相同资源去重）
• 入口（包括支持非 JS 的入口文件、多入口处理）
• 图片（包括 data-url、url 两种形式）
• Service Worker
• Binary（包括 array buffer、url 两种形式；wasm）
• 自定义类型

引入模块

• Common JS
• ES Module
• 来自 Node Modules 的依赖

Hashing

• Asset-of-asset hash cascading

Code Splitting

• Dynamic Import（import()）
• 单页面多入口文件（共用 runtimeChunk）
• 多页面多入口文件
• Chunk 间共享
• Worker 和非 Worker 之间共享
• Worker 和 Worker 之间共享

补充杂项

• patch（例如yarn支持的modules 补丁）
• Source Map（定位，调试）
• Resolving（包括 alias、externals、package.json exports 等）
• publicPath（root，srcRoot等资源路径）
• Targets（包括 Modern 产物、Legacy 模式等）

参考

• Overview | Tooling.Report
• 280 - 《构建工具应该包含哪些能力》

后续继续补充....

具体方案单独列出整理文章