编译工具 Babel
Babel 主要有三个功能：
- 转义 ES6 为 ES5，保证新语法也可以在旧版本浏览器中运行。
- 通过 polyfill 方式在目标环境中添加缺失特性。
- 源码转换。
1. 安装 Babel
（1）生成 package.json
mkdir babel-note && cd babel-note，npm init -y
（2）安装 @babel/core，@babel/cli
npm install --save-dev @babel/core @babel/cli
@babel/core 是 Babel 的核心包，@babel/cli 是 Babel 提供的命令行工具，提供 Babel 命令。需要基于 @babel/core 才能正常工作。
（3）安装 @babel/preset-env，@babel/polyfill
npm install --save-dev @babel/preset-env @babel/polyfill
@babel/preset-env 会根据配置的目标环境生成插件列表并进行编译，目标环境可以在 package.json 文件 browserslist 中配置。
// package.json
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
Babel 默认只转换新的语法，不转换新的 API（如：Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol 和 Promise 等全局对象），以及一些定义在 Object 对象上的方法（如：Object.assign）。只有安装了 @babel/polyfill 才会正常执行。
2. Babel 的四种配置文件
- babel.config.js，项目根目录下的 JS 文件，官方推荐。
- .babelrc，配置文件内容是 JSON 数据结构。
- package.json 的 babel 字段。
- .babelrc.js
以 babel.config.js 为例提供编译结果：
// 项目根目录下 babel.config.js
module.exports = function (api) {
api.cache(true);
const presets = ["@babel/preset-env"];
const plugins = [];
return {presets, plugins};
}
// /scr/index.js
let compare = (a, b) => {
return a >b;
}
// package.json
...
"scripts": {
"build": "babel src --out-dir lib"
}
...
执行 npm run build 将会在 lib 目录下输出编译好的 JS 代码：
"use strict";
var compare = function compare(a, b) {
return a > b;
};
3. Babel 工作过程
Babel 作为编译器，和其他编译器一样，工作过程可以分为三部分：
- 解析（parse）：将源代码转换成抽象语法树（Abstract Syntax Tree，AST），树上的每个节点都表示源代码中的一种结构。
- 转换（transform）：对抽象语法树做一些特殊处理，使其符合编译器的期望，在 Babel 中主要通过转换器实现。
- 代码生成（generate）：将转换过的抽象语法树生成新的代码。