初学 Babel 工做原理

时间 2019-12-07

标签初学 babel 原理繁體版

原文原文链接

原文连接：初学 Babel 工做原理html

前言

Babel 对于前端开发者来讲应该是很熟悉了，平常开发中基本上是离不开它的。前端

已经9102了，咱们已经可以熟练地使用 es2015+ 的语法。可是对于浏览器来讲，可能和它们还不够熟悉，咱们得让浏览器理解它们，这就须要 Babel。git

固然，仅仅是 Babel 是不够的，还须要 polyfill 等等等等，这里就先不说了。github

What：什么是 `Babel`

Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.express

简单地说，Babel 可以转译 ECMAScript 2015+ 的代码，使它在旧的浏览器或者环境中也可以运行。数组

咱们能够在 babel.docschina.org/repl 尝试一下。浏览器

一个小🌰：bash

// es2015 的 const 和 arrow function
const add = (a, b) => a + b;

// Babel 转译后
var add = function add(a, b) {
  return a + b;
};
复制代码

Babel 的功能很纯粹。咱们传递一段源代码给 Babel，而后它返回一串新的代码给咱们。就是这么简单，它不会运行咱们的代码，也不会去打包咱们的代码。babel

它只是一个编译器。函数

How: Babel 是如何工做的

首先得要先了解一个概念：抽象语法树（Abstract Syntax Tree, AST），Babel 本质上就是在操做 AST 来完成代码的转译。

AST

AST 是什么这里就不细说了，想要了解更多信息能够查看 Abstract syntax tree - Wikipedia。

这里比较关心的一段 JavaScript 代码会生成一个怎样的 AST，Babel 又是怎么去操做 AST 的。

咱们仍是拿上面的🌰来讲明 const add = (a, b) => a + b;，这样一句简单的代码，咱们来看看它生成的 AST 会是怎样的：

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration", // 变量声明
      "declarations": [ // 具体声明
        {
          "type": "VariableDeclarator", // 变量声明
          "id": {
            "type": "Identifier", // 标识符（最基础的）
            "name": "add" // 函数名
          },
          "init": {
            "type": "ArrowFunctionExpression", // 箭头函数
            "id": null,
            "expression": true,
            "generator": false,
            "params": [ // 参数
              {
                "type": "Identifier",
                "name": "a"
              },
              {
                "type": "Identifier",
                "name": "b"
              }
            ],
            "body": { // 函数体
              "type": "BinaryExpression", // 二项式
              "left": { // 二项式左边
                "type": "Identifier",
                "name": "a"
              },
              "operator": "+", // 二项式运算符
              "right": { // 二项式右边
                "type": "Identifier",
                "name": "b"
              }
            }
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "module"
}
复制代码

咱们能够经过一棵“树”来更为直观地展现这句代码的 AST(从第二层的 declarations 开始)：

一个 AST 的根节点始终都是 Program，上面的例子咱们从 declarations 开始往下读：

一个VariableDeclaration(变量声明)：声明了一个 name 为 add 的ArrowFunctionExpression(箭头函数)：

params(函数入参)：a 和 b
函数体：函数主体是一个BinaryExpression(二项式)，一个标准的二项式分为三部分：
- left(左边)：a
- operator(运算符)：加号 +
- right(右边)：b

这样就拆解了这一行代码。

若是想要了解更多，能够阅读和尝试：

分析 AST：ASTexplorer.net
AST 规范：github.com/estree/estr…

Babel 工做过程

了解了 AST 是什么样的，就能够开始研究 Babel 的工做过程了。

上面说过，Babel 的功能很纯粹，它只是一个编译器。

大多数编译器的工做过程能够分为三部分：

Parse(解析)：将源代码转换成更加抽象的表示方法（例如抽象语法树）
Transform(转换)：对（抽象语法树）作一些特殊处理，让它符合编译器的指望
Generate(代码生成)：将第二步通过转换过的（抽象语法树）生成新的代码

嗯... 既然 Babel 是一个编译器，固然它的工做过程也是这样的。咱们来仔细看看这三步分别作了什么事。固然，仍是拿上面的🌰来讲明 const add = (a, b) => a + b，看看它是如何通过 Babel 变成：

var add = function add(a, b) {
  return a + b;
};
复制代码

Parse（解析）

通常来讲，Parse 阶段能够细分为两个阶段：词法分析（Lexical Analysis, LA）和语法分析（Syntactic Analysis, SA）。

词法分析

词法分析阶段能够当作是对代码进行“分词”，它接收一段源代码，而后执行一段 tokenize 函数，把代码分割成被称为Tokens 的东西。Tokens 是一个数组，由一些代码的碎片组成，好比数字、标点符号、运算符号等等等等，例如这样：

[
    { "type": "Keyword", "value": "const" },
    { "type": "Identifier", "value": "add" },
    { "type": "Punctuator", "value": "=" },
    { "type": "Punctuator", "value": "(" },
    { "type": "Identifier", "value": "a" },
    { "type": "Punctuator", "value": "," },
    { "type": "Identifier", "value": "b" },
    { "type": "Punctuator", "value": ")" },
    { "type": "Punctuator", "value": "=>" },
    { "type": "Identifier", "value": "a" },
    { "type": "Punctuator", "value": "+" },
    { "type": "Identifier", "value": "b" }
]
复制代码

经过 esprima.org/demo/parse.… 生成的。

看上去好像很容易啊，就是把一句完整的代码拆成一个个独立个体就行了。可是，咱们得让机器知道怎么拆~

咱们来试着实现一下 tokenize 函数：

/**
 * 词法分析 tokenize
 * @param {string} code JavaScript 代码
 * @return {Array} token
 */
function tokenize(code) {
    if (!code || code.length === 0) {
        return [];
    }
    var current = 0; // 记录位置
    var tokens = []; // 定义一个空的 token 数组
    
    var LETTERS = /[a-zA-Z\$\_]/i;
    var KEYWORDS = /const/; //  模拟一下判断是否是关键字
    var WHITESPACE = /\s/;
    var PARENS = /\(|\)/;
    var NUMBERS = /[0-9]/;
    var OPERATORS = /[+*/-]/;
    var PUNCTUATORS = /[~!@#$%^&*()/\|,.<>?"';:_+-=\[\]{}]/;
    
    // 从第一个字符开始遍历
    while (current < code.length) {
        var char = code[current];
        // 判断空格
        if (WHITESPACE.test(char)) {
          current++;
          continue;
        }
        // 判断连续字符
        if (LETTERS.test(char)) {
            var value = '';
            var type = 'Identifier';
            while (char && LETTERS.test(char)) {
                value += char;
                char = code[++current];
            }
            // 判断是不是关键字
            if (KEYWORDS.test(value)) {
                type = 'Keyword'
            }
            tokens.push({
                type: type,
                value: value
            });
            continue;
        }
        // 判断小括号
        if (PARENS.test(char)) {
            tokens.push({
              type: 'Paren',
              value: char
            });
            current++;
            continue;
        }
        // 判断连续数字
        if (NUMBERS.test(char)) {
          var value = '';
          while (char && NUMBERS.test(char)) {
            value += char;
            char = code[++current];
          }
          tokens.push({
            type: 'Number',
            value: value
          });
          continue;
        }
        // 判断运算符
        if (OPERATORS.test(char)) {
            tokens.push({
                type: 'Operator',
                value: char
            });
            current++;
            continue;
        }
        // 判断箭头函数
        if (PUNCTUATORS.test(char)) {
            var value = char;
            var type = 'Punctuator';
            var temp = code[++current];
            if (temp === '>') {
                type = 'ArrowFunction';
                value += temp;
                current ++;
            }
            tokens.push({
                type: type,
                value: value
            });
            continue;
        }
        tokens.push({
            type: 'Identifier',
            value: char
        });
        current++;
    }
    return tokens;
}
复制代码

上面这个 tokenize 函数只是本身实现如下，与实际上 Babel 的实现方式仍是差很多的，若是感兴趣能够看看github.com/babel/babel…

咱们来测试一下：

const tokens = tokenize('const add = (a, b) => a + b')；
console.log(tokens);

[
  { "type": "Keyword", "value": "const" },
  { "type": "Identifier", "value": "add" },
  { "type": "Punctuator", "value": "=" },
  { "type": "Paren", "value": "(" },
  { "type": "Identifier", "value": "a" },
  { "type": "Punctuator", "value": "," },
  { "type": "Identifier", "value": "b" },
  { "type": "Paren", "value": ")" },
  { "type": "ArrowFunction", "value": "=>" },
  { "type": "Identifier", "value": "a" },
  { "type": "Operator", "value": "+" },
  { "type": "Identifier", "value": "b" }
]
复制代码

看上去和上面的有点不太同样，不要紧，我只是细化了一下类别，意思就是这么个意思。

语法分析

词法分析以后，代码就已经变成了一个 Tokens 数组了，如今须要经过语法分析把 Tokens 转化为上面提到过的 AST。

说来惭愧，这里没有想到很好的思路来实现一个 parse 函数。若是哪天想到了，再补充上来。

如今咱们先假设已经实现了这样一个函数，把上面的 Tokens 转化成了一个 AST，进入下一步。

若是感兴趣能够看看官方的作法github.com/babel/babel…

Transform(转换)

这一步作的事情也很简单，就是操做 AST。若是忘记了 AST 是什么，能够回到上面再看看。

咱们能够看到 AST 中有不少类似的元素，它们都有一个 type 属性，这样的元素被称做节点。一个节点一般含有若干属性，能够用于描述 AST 的部分信息。

好比这是一个最多见的 Identifier 节点：

{
    type: 'Identifier',
    name: 'add'
}
复制代码

表示这是一个标识符。

因此，操做 AST 也就是操做其中的节点，能够增删改这些节点，从而转换成实际须要的 AST。

更多的节点规范能够在github.com/estree/estr…中查看。

Babel 对于 AST 的遍历是深度优先遍历，对于 AST 上的每个分支 Babel 都会先向下遍历走到尽头，而后再向上遍历退出刚遍历过的节点，而后寻找下一个分支。

仍是上面的🌰：

{
  "type": "Program",
  "body": [
    {
      "type": "VariableDeclaration", // 变量声明
      "declarations": [ // 具体声明
        {
          "type": "VariableDeclarator", // 变量声明
          "id": {
            "type": "Identifier", // 标识符（最基础的）
            "name": "add" // 函数名
          },
          "init": {
            "type": "ArrowFunctionExpression", // 箭头函数
            "id": null,
            "expression": true,
            "generator": false,
            "params": [ // 参数
              {
                "type": "Identifier",
                "name": "a"
              },
              {
                "type": "Identifier",
                "name": "b"
              }
            ],
            "body": { // 函数体
              "type": "BinaryExpression", // 二项式
              "left": { // 二项式左边
                "type": "Identifier",
                "name": "a"
              },
              "operator": "+", // 二项式运算符
              "right": { // 二项式右边
                "type": "Identifier",
                "name": "b"
              }
            }
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "module"
}
复制代码

根节点咱们就不说了，从 declarations 里开始遍历：

声明了一个变量，而且知道了它的内部属性（id、init），而后咱们再以此访问每个属性以及它们的子节点。
id 是一个 Idenrifier，有一个 name 属性表示变量名。
以后是 init，init 也有好几个内部属性：

type 是ArrowFunctionExpression，表示这是一个箭头函数表达式
params 是这个箭头函数的入参，其中每个参数都是一个 Identifier 类型的节点；
body 属性是这个箭头函数的主体，这是一个 BinaryExpression 二项式：left、operator、right，分别表示二项式的左边变量、运算符以及右边变量。

这是遍历 AST 的白话形式，再看看 Babel 是怎么作的：

Babel 会维护一个称做 Visitor 的对象，这个对象定义了用于 AST 中获取具体节点的方法。

Visitor

一个 Visitor 通常来讲是这样的：

var visitor = {
    ArrowFunction() {
        console.log('我是箭头函数');
    },
    IfStatement() {
        console.log('我是一个if语句');
    },
    CallExpression() {}
};
复制代码

当咱们遍历 AST 的时候，若是匹配上一个 type，就会调用 visitor 里的方法。

这只是一个简单的 Visitor。

上面说过，Babel 遍历 AST 其实会通过两次节点：遍历的时候和退出的时候，因此实际上 Babel 中的 Visitor 应该是这样的：

var visitor = {
    Identifier: {
        enter() {
            console.log('Identifier enter');
        },
        exit() {
            console.log('Identifier exit');
        }
    }
};
复制代码

好比咱们拿这个 visitor 来遍历这样一个 AST：

params: [ // 参数
    {
        "type": "Identifier",
        "name": "a"
    },
    {
        "type": "Identifier",
        "name": "b"
    }
]
复制代码

过程多是这样的...

进入 Identifier(params[0])
走到尽头
退出 Identifier(params[0])
进入 Identifier(params[1])
走到尽头
退出 Identifier(params[1])

固然，Babel 中的 Visitor 模式远远比这复杂...

回到上面的🌰，箭头函数是 ES5 不支持的语法，因此 Babel 得把它转换成普通函数，一层层遍历下去，找到了 ArrowFunctionExpression 节点，这时候就须要把它替换成 FunctionDeclaration 节点。因此，箭头函数多是这样处理的：

import * as t from "@babel/types";

var visitor = {
    ArrowFunction(path) {
        path.replaceWith(t.FunctionDeclaration(id, params, body));
    }
};
复制代码

对细节感兴趣的能够翻翻源码github.com/babel/babel…。

Generate(代码生成)

通过上面两个阶段，须要转译的代码已经通过转换，生成新的 AST 了，最后一个阶段理所应当就是根据这个 AST 来输出代码。

Babel 是经过 github.com/babel/babel… 来完成的。固然，也是深度优先遍历。

class Generator extends Printer {
  constructor(ast, opts = {}, code) {
    const format = normalizeOptions(code, opts);
    const map = opts.sourceMaps ? new SourceMap(opts, code) : null;
    super(format, map);
    this.ast = ast;
  }
  ast: Object;
  generate() {
    return super.generate(this.ast);
  }
}
复制代码

通过这三个阶段，代码就被 Babel 转译成功了。

任重而道远... 想真正掌握 Babel 还有很长的路...