从 babel-cli 到 babel-preset-es2015 - 理解 babel 工作原理

什么是 babel

Babel 是一个 JavaScript 编译器，用于将 ES6/ES7/ES8 以及其他语言的代码转换成向后兼容的 JavaScript 代码。在前端开发中，由于浏览器对新特性的支持存在差异，因此使用 Babel 编译工具可以让我们在写最新语法的代码时，不需要担心兼容问题。

babel-cli 的使用

在安装好 Node.js 之后，我们可以通过 npm 安装 babel-cli 来进行命令行使用。

npm install --save-dev babel-cli

安装完成后，我们可以在终端执行 babel 命令，将一个 js 文件转译成 ES5 代码，例如：

babel app.js --out-file app-compiled.js

这个命令会将 app.js 文件中的代码编译成 ES5 代码，输出到 app-compiled.js 文件中。

babel-preset-es2015

Babel 可以通过插件进行扩展，不同的插件可以用于编译不同的语法，例如对应 ES6 的 preset-es2015 插件。

npm install --save-dev babel-preset-es2015

安装完成后，在 babel-cli 中使用该插件时，需要提前配置 .babelrc 文件。

{
  "presets": ["es2015"]
}

通过这样的配置，babel 将会自动根据指定的 preset 来转换代码。

深入理解 babel 工作原理

babel 实现语法转换的流程可以简单概括为：解析、转换、生成。

解析阶段

babel 首先会使用 babel-parser 将输入的 JavaScript 代码转换成 AST（抽象语法树），这个过程通常被称为解析阶段。AST 是一个树形结构，它用于表征代码的结构和含义。

例如：

const add = (a, b) => a + b;

经过解析阶段之后，会被转换成如下的 AST 结构：

// www.javascriptcn.com code example
{
  "type": "Program",
  "start": 0,
  "end": 23,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 23,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 6,
          "end": 22,
          "id": {
            "type": "Identifier",
            "start": 6,
            "end": 9,
            "name": "add"
          },
          "init": {
            "type": "ArrowFunctionExpression",
            "start": 12,
            "end": 22,
            "id": null,
            "params": [
              {
                "type": "Identifier",
                "start": 13,
                "end": 14,
                "name": "a"
              },
              {
                "type": "Identifier",
                "start": 16,
                "end": 17,
                "name": "b"
              }
            ],
            "generator": false,
            "expression": true,
            "async": false,
            "body": {
              "type": "BinaryExpression",
              "start": 21,
              "end": 22,
              "left": {
                "type": "Identifier",
                "start": 21,
                "end": 22,
                "name": "a"
              },
              "operator": "+",
              "right": {
                "type": "Identifier",
                "start": 21,
                "end": 22,
                "name": "b"
              }
            }
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "module"
}

转换阶段

在转换阶段，babel 会使用一系列的插件对 AST 进行遍历和修改。例如：将 ES6 的箭头函数转换成普通函数，

// input
const add = (a, b) => a + b;

// output
const add = function(a, b) {
  return a + b;
}

转换阶段的主要任务是将 AST 中的节点遍历并应用不同的转换插件，生成新的 AST。

生成阶段

在生成阶段，babel 会使用 babel-generator 将新的 AST 转换成代码并输出。

例如：

// www.javascriptcn.com code example
// input
const add = (a, b) => a + b;

// output
"use strict";

var add = function add(a, b) {
  return a + b;
};

总结

通过本文的介绍可以看出，Babel 的工作原理非常的复杂，但是使用起来却非常简单，只需要掌握其中的一些基本概念和使用方法就能够使用 babel-cli 和 babel-preset-es2015 了。同时也希望大家深入学习 babel 工作原理，可以更好的了解和使用 babel。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/649ab42c48841e98947a6828