JavaScript 构建流水线：ES6 → ES5 → 压缩 → 体积对比

概述

现代JavaScript开发中，我们经常需要将ES6+代码转换为兼容性更好的ES5代码，然后进行压缩优化。本文档详细介绍了完整的手动构建流水线。

构建流水线步骤

1. 环境准备

1.1 安装Babel（语法降级工具）

# 全局安装Babel CLI和核心包
npm install -g @babel/cli @babel/core @babel/preset-env

1.2 安装Terser（代码压缩工具）

# 全局安装Terser
npm install -g terser

1.3 验证安装

# 检查Babel版本
babel --version

# 检查Terser版本
terser --version

2. 配置Babel

2.1 创建配置文件

在项目根目录创建 .babelrc.json 文件：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "defaults, not ie 11, not ie_mob 11",
        "useBuiltIns": false,
        "modules": false
      }
    ]
  ]
}

2.2 配置说明

• targets: 指定目标浏览器环境
  • "defaults": 支持主流浏览器
  • "ie 11": 支持IE11（如需兼容老浏览器）
  • "not ie 11": 排除IE11（现代浏览器）
• useBuiltIns: 是否自动引入polyfill
• modules: 模块系统转换（false保持ES6模块）

3. 执行构建流水线

3.1 第一步：ES6 → ES5 语法降级

# 使用Babel进行语法转换
babel src/components/myLibrary.js --out-file dist/myLibrary.es5.js

作用说明：

• 将箭头函数转换为普通函数
• 将class语法转换为prototype
• 将const/let转换为var
• 将模板字符串转换为字符串拼接
• 将解构赋值转换为传统赋值

3.2 第二步：ES5 → 压缩混淆

# 使用Terser进行代码压缩
terser dist/myLibrary.es5.js --compress --mangle --output dist/myLibrary.min.js

参数说明：

• --compress: 启用代码压缩
  • 删除无用代码
  • 简化表达式
  • 合并变量声明
• --mangle: 启用变量名混淆
  • 缩短变量名
  • 缩短函数名
  • 保护关键字

4. 体积对比分析

4.1 查看文件大小

# Windows PowerShell
Get-ChildItem dist/myLibrary.* | Select-Object Name, @{Name="Size(KB)";Expression={[math]::Round($_.Length/1KB,2)}}

# Linux/macOS
ls -lh dist/myLibrary.*

4.2 典型体积变化示例

文件类型	文件名	大小	变化率	说明
原始ES6	myLibrary.js	25.6 KB	-	现代语法，体积适中
降级ES5	myLibrary.es5.js	28.3 KB	+10.5%	兼容性代码增加体积
压缩版本	myLibrary.min.js	12.1 KB	-57.2%	大幅减少体积

5. 高级配置选项

5.1 Babel高级配置

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "browsers": ["> 1%", "last 2 versions"],
          "node": "14"
        },
        "useBuiltIns": "usage",
        "corejs": 3,
        "modules": false,
        "debug": true
      }
    ]
  ]
}

5.2 Terser高级配置

# 更激进的压缩选项
terser input.js \
  --compress drop_console=true,drop_debugger=true \
  --mangle toplevel=true \
  --output output.min.js \
  --source-map

6. 自动化脚本

6.1 创建构建脚本

创建 build.sh (Linux/macOS) 或 build.bat (Windows)：

#!/bin/bash
# build.sh

echo "开始构建流水线..."

# 第一步：ES6转ES5
echo "步骤1: ES6 → ES5 语法降级"
babel src/main.js --out-file dist/main.es5.js

# 第二步：ES5压缩
echo "步骤2: ES5 → 压缩混淆"
terser dist/main.es5.js --compress --mangle --output dist/main.min.js

# 第三步：体积对比
echo "步骤3: 体积对比分析"
ls -lh dist/main.*

echo "构建完成！"

6.2 package.json脚本

{
  "scripts": {
    "build:es5": "babel src/main.js --out-file dist/main.es5.js",
    "build:min": "terser dist/main.es5.js --compress --mangle --output dist/main.min.js",
    "build": "npm run build:es5 && npm run build:min",
    "build:analyze": "npm run build && ls -lh dist/"
  }
}

7. 最佳实践建议

7.1 文件命名规范

• library.js - 原始ES6源码
• library.es5.js - ES5兼容版本
• library.min.js - 生产环境压缩版
• library.dev.js - 开发环境版本（未压缩）

7.2 构建策略

1. 开发阶段: 使用原始ES6代码，便于调试
2. 测试阶段: 使用ES5版本，确保兼容性
3. 生产阶段: 使用压缩版本，优化加载速度

7.3 性能优化提示

• 使用Tree Shaking减少无用代码
• 启用gzip压缩进一步减小体积
• 考虑代码分割(Code Splitting)
• 使用CDN加速静态资源加载

8. 常见问题排查

8.1 Babel转换问题

# 如果遇到语法错误，检查配置
babel src/main.js --out-file dist/main.es5.js --verbose

8.2 Terser压缩问题

# 如果压缩后代码报错，尝试保守压缩
terser input.js --compress --output output.min.js --keep-fnames

8.3 兼容性检查

使用在线工具检查代码兼容性：

• Can I Use (caniuse.com)
• Babel REPL (babeljs.io/repl)

总结

通过 ES6 → ES5 → 压缩 的三步构建流水线，我们可以：

1. 提高兼容性 - ES5支持更多浏览器
2. 优化性能 - 压缩减少文件体积50%+
3. 保持开发效率 - 开发时使用现代语法
4. 确保生产质量 - 自动化构建减少人为错误

这套流水线是现代前端工程化的基础，掌握后可以应用到任何JavaScript项目中。