语法降级和代码压缩指南

快速开始

单文件快速转换

# 一行命令完成ES6→ES5转换
npx babel src\my.js --presets=@babel/preset-env --out-file my.es5.js

这个命令会：

• 自动下载所需工具
• 将现代 JavaScript 语法转换为 ES5
• 输出兼容性更好的代码

常用转换场景

1. 基础语法转换

# 转换ES6+特性为ES5
npx babel input.js --presets=@babel/preset-env --out-file output.js

转换内容：

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

2. 兼容老浏览器

# 兼容IE11等老浏览器
npx babel input.js --presets='["@babel/preset-env",{"targets":{"ie":"11"}}]' --out-file output.js

3. 带 Polyfill 的完整转换

# 安装依赖
npm install --save core-js regenerator-runtime

# 转换命令
npx babel input.js --presets='["@babel/preset-env",{"targets":{"ie":"11"},"useBuiltIns":"usage","corejs":3}]' --out-file output.js

代码压缩优化

使用 Terser 压缩

# 安装Terser
npm install -g terser

# 压缩JavaScript文件
terser input.js --compress --mangle --output output.min.js

构建完整流水线

# 1. 语法降级
npx babel src\main.js --presets=@babel/preset-env --out-file dist\main.es5.js

# 2. 代码压缩
terser dist\main.es5.js --compress --mangle --output dist\main.min.js

# 3. 查看效果
dir dist\main.*

实用技巧

1. 在线转换工具

• Babel REPL: https://babeljs.io/repl
• 无需安装，粘贴代码即可转换

2. 批量转换

# 转换整个目录
npx babel src --out-dir lib

# 转换多个文件
npx babel src/*.js --out-dir lib

3. 保留函数名（调试用）

# 压缩时保留函数名
terser input.js --compress --mangle keep_fnames=true --output output.js

常见问题解决

1. 异步函数支持

如果代码包含 async/await，需要添加 regeneratorRuntime：

<!-- 在HTML中添加 -->
<script src="https://cdn.jsdelivr.net/npm/regenerator-runtime/runtime.js"></script>

2. 新 API 支持

对于 fetch、Promise 等新 API，需要 polyfill：

npm install --save whatwg-fetch es6-promise

3. 检查转换结果

# 对比文件大小
dir *.js

何时使用不同方案

临时转换

# 使用npx，无需安装
npx babel file.js --presets=@babel/preset-env --out-file file.es5.js

项目开发

# 全局安装，提高速度
npm install -g @babel/cli @babel/core @babel/preset-env
babel src --out-dir lib

生产构建

# 完整流程：转换 → 压缩 → 优化
npx babel src\app.js --presets=@babel/preset-env --out-file temp.js
terser temp.js --compress --mangle --output app.min.js
del temp.js