编译工具 Babel

编译工具 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）：将转换过的抽象语法树生成新的代码。