编辑“︁JavaScript构建工具”︁

= JavaScript构建工具 =

'''JavaScript构建工具'''是现代前端开发中用于自动化处理源代码的软件工具，它们通过任务流水线（如代码转译、打包、压缩、优化）提升开发效率和项目质量。本条目将详细介绍其核心概念、主流工具及实际应用。

== 核心概念 ==
构建工具主要解决以下问题：
* '''模块化支持'''：将分散的代码文件合并为浏览器可识别的格式（如通过Webpack的模块打包）。
* '''语法转换'''：利用Babel等工具将ES6+代码转译为兼容旧浏览器的ES5代码。
* '''资源优化'''：压缩JavaScript、CSS，优化图片等静态资源。
* '''开发效率'''：提供热更新（HMR）、代码校验等功能。

数学表达示例：构建工具的优化效果可量化为<math>\text{输出体积} = \sum_{i=1}^{n} (\text{原始文件体积}_i \times \text{压缩率}_i)</math>

== 主流工具对比 ==
{| class="wikitable"
|+ 功能对比
! 工具名称 !! 核心功能 !! 适用场景
|-
| Webpack || 模块打包、代码分割 || 复杂SPA项目
|-
| Rollup || ES模块打包、库开发 || 轻量级库
|-
| Vite || 原生ESM开发服务器 || 快速原型开发
|-
| Parcel || 零配置打包 || 简单项目
|}

== 实际案例 ==
=== Webpack基础配置 ===
<syntaxhighlight lang="javascript">
// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'babel-loader'  // 使用Babel处理JS文件
      }
    ]
  }
};
</syntaxhighlight>

输入文件<code>src/index.js</code>：
<syntaxhighlight lang="javascript">
import { greet } from './utils';
greet('World');
</syntaxhighlight>

输出文件<code>dist/bundle.js</code>将包含转译后的ES5代码和所有依赖。

=== Vite开发服务器 ===
<mermaid>
graph TD
    A[源代码修改] --> B{Vite检测变更}
    B -->|是| C[原生ESM即时更新]
    B -->|否| D[保持当前状态]
</mermaid>

== 高级应用 ==
=== Tree Shaking示例 ===
Rollup通过静态分析移除未使用代码：
<syntaxhighlight lang="javascript">
// math.js
export function square(x) { return x * x; }
export function cube(x) { return x * x * x; }

// main.js
import { cube } from './math.js';
console.log(cube(5));  // 仅打包cube函数
</syntaxhighlight>

== 最佳实践 ==
* 开发环境：优先选择Vite等快速启动工具
* 生产环境：使用Webpack进行深度优化
* 库开发：推荐Rollup生成更精简的包

== 参见 ==
* [[JavaScript模块系统]]
* [[前端性能优化]]
* [[持续集成中的构建流程]]

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript工具与环境]]