JavaScript构建工具
1、什么是 JavaScript 构建工具
JavaScript 构建工具 是用于 辅助开发者在开发 JavaScript 应用时，对代码进行转换、打包、优化、压缩、测试等操作的工具。
简单来说： JavaScript 构建工具就是帮你把“写代码”变成“能运行在生产环境中的高效代码”的工具。
2、构建工具的作用
| 功能 | 说明 |
|---|---|
| 代码转换 | 如把 ES6 → ES5、TypeScript → JavaScript、JSX → JavaScript |
| 模块打包 | 把多个模块打包成一个或多个文件，优化加载 |
| 代码压缩 | 压缩 JS / CSS，减小文件体积，提高加载速度 |
| 预处理器支持 | 支持 Sass、Less、TypeScript 等编译 |
| 静态资源处理 | 处理图片、字体等资源路径和优化 |
| 开发服务器 | 提供热更新（HMR）、本地调试服务器 |
| 代码检查 & 格式化 | 如 ESLint、Prettier |
| 自动化流程 | 通过脚本自动完成构建、测试、部署等任务 |
3、主流 JavaScript 构建工具
1、Webpack
最流行、功能最全的模块打包工具
作用：打包 JavaScript 模块、CSS、图片、字体等所有前端资源
特点：
1.支持代码分割、懒加载
2.插件系统非常强大（比如 BabelLoader、CSSLoader、HtmlWebpackPlugin）
3.可打包任何静态资源
适合：中大型项目、复杂前端应用
官网：webpack
2、Babel
JavaScript 编译器，用于将新语法转换为兼容旧浏览器的代码
作用：将 ES6+ / TypeScript / JSX 等代码编译为浏览器兼容的 ES5 代码
特点：
1.不是打包工具，但是构建流程中的核心工具
2.必须配合 Webpack / Vite / Rollup 等使用
适合：所有需要兼容旧浏览器的项目
官网：Babel
3、Vite
新一代极速构建工具，由 Vue 团队开发，现支持所有框架
作用：开发服务器 + 构建工具，基于 ES Modules，启动超快
特点：
1.开发时无需打包，启动秒级
2.生产环境使用 Rollup 打包，性能极佳
3.配置简单，开箱即用
4.比 Webpack 简单很多
适合：Vue / React / 原生 JS 项目，特别适合现代前端开发
官网：Vite | Next Generation Frontend Tooling
4、Rollup
轻量、高效的 JavaScript 模块打包器，适合库开发
作用：将小模块打包为高效、优化过的代码，特别适合开发 JS 库
特点：
1.输出代码更简洁、体积更小
2.Tree-shaking（移除未使用代码）效果更好
3.配置比 Webpack 简单
适合：开发 JavaScript 第三方库、工具包
官网：Rollup
5、ESBuild~超快编译工具
极快的 JavaScript / TypeScript 打包和转译工具，由 Go 编写
作用：极速编译 JS / TS / JSX，比 Babel 快 100 倍以上
特点：
1.速度极快，但功能相对简单
2.常被 Vite / Rollup 等工具用作底层转译器
适合：需要极速构建的项目，或作为其他工具的底层引擎
官网：esbuild - An extremely fast bundler for the web