看了就懂的 AST 和 Babel 工作流程-低调大师

看了就懂的 AST 和 Babel 工作流程

2020-08-21 590

前言

本文写于 2019 年，如有不对之处欢迎指出。

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

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

当然，仅仅是 Babel 是不够的，还需要 polyfill 等等等等，这里就先不说了。

这篇文章是一个 Babel 的入门文章，希望能够用浅显易懂的语言让不懂 Babel 的人不再恐惧。

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.

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

我们可以在 https://babel.docschina.org/repl 尝试一下。

一个小🌰：

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

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

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：https://ASTexplorer.net
AST 规范：https://github.com/estree/estree

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" }
]

通过 http://esprima.org/demo/parse.html 生成的。

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

我们来试着实现一下 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 的实现方式还是差不少的，如果感兴趣可以看看https://github.com/babel/babel/blob/master/packages/babel-parser/src/tokenizer

我们来测试一下：

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，进入下一步。

如果感兴趣可以看看官方的做法https://github.com/babel/babel/tree/master/packages/babel-parser/src/parser

Transform(转换)

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

我们可以看到 AST 中有很多相似的元素，它们都有一个 type 属性，这样的元素被称作「节点」。一个节点通常含有若干属性，可以用于描述 AST 的部分信息。

比如这是一个最常见的 Identifier 节点：

{
    type: 'Identifier',
    name: 'add'
}

表示这是一个标识符。

所以，操作 AST 也就是操作其中的节点，可以增删改这些节点，从而转换成实际需要的 AST。

更多的节点规范可以在https://github.com/estree/estree中查看。

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));
    }
};

对细节感兴趣的可以翻翻源码https://github.com/babel/babel/tree/master/packages/babel-traverse。

Generate(代码生成)

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

Babel 是通过 https://github.com/babel/babel/tree/master/packages/babel-generator 来完成的。当然，也是深度优先遍历。

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 还有很长的路...

参考链接

Babel:https://babel.docschina.org/
Babel是如何读懂JS代码的: https://zhuanlan.zhihu.com/p/27289600
the super tiny compiler: https://github.com/jamiebuilds/the-super-tiny-compiler
Babel 插件手册: https://github.com/jamiebuilds/babel-handbook/blob/master/translations/zh-Hans/plugin-handbook.md#toc-stages-of-babel
理解 Babel 插件: http://taobaofed.org/blog/2016/09/30/babel-plugins/

交流讨论

欢迎关注公众号「前端试炼」，公众号平时会分享一些实用或者有意思的东西，发现代码之美。专注深度和最佳实践，希望打造一个高质量的公众号。

公众号后台回复「加群」，拉你进交流面试群。

如果你不想加群，只是想加我也是可以的。

如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~

本文分享自微信公众号 - 前端试炼（code-photo）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。

微信关注我们

原文链接：https://my.oschina.net/u/3347851/blog/4521793

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Java8 Stream常用API整理（值得收藏）

点击上方“Java专栏”，选择“置顶或者星标” 第一时间阅读精彩文章！点击这段文字获取：5个可以写到简历的项目实战视频教程（含源码）题图：pexels 作者：程铭程铭你快成名来源：https://blog.csdn.net/wangchengming1/article/details/89245402 Java8中有两大最为重要的改变，第一个是Lambda表达式，另外一个则是Stream API。流是 Java8 引入的全新概念，它用来处理集合中的数据。众所周知，集合操作非常麻烦，若要对集合进行筛选、投影，需要写大量的代码，而流是以声明的形式操作集合，它就像 SQL 语句，我们只需告诉流需要对集合进行什么操作，它就会自动进行操作，并将执行结果交给你，无需我们自己手写代码。在项目中使用 Stream API 可以大大提高效率以及代码的可读性，使我们对数据进行处理的时候事半功倍。这篇博文以实战角度出发，讲解平时开发中常用 API 的用法以及一些注意的地方。首先创建一个对象 publicclassEmployee{privateintid;privateString n...

2020-08-21

593

点击上方“方志朋”，选择“设为星标” 回复”666“获取新整理的面试文章提到数据一致性、操作原子性，诸如此类的一些与并发有关的词汇时不知道你第一时间会联想到什么呢？我相信大多数人可能会想到“锁”，为什么是锁呢，这个我不多说，大家心里应该都明白。在单体应用时代，我们使用jvm提供的锁就可以很好的工作，但是到了分布式应用时代，jvm提供的锁就行不通了，那么势必要借助一些跨jvm的临界资源来支持锁的相关语义，比如redis，zookeeper等。步入正题我今天就来分享下我司基于redis来实现的分布式锁，2013年投入使用，也算是久经沙场。但是也存在一些设计上的缺陷，这个我后面也会提到，希望大家秉着互相学习的态度文明交流，别一上来就说这不行那不行，还是那句话“适合自己的才是最好的”。加锁过程分析 image 我第一次读代码的时候，有这么几个疑惑： Q1：为什么不使用 SET key value [expiration EX seconds|PX milliseconds] [NX|XX] 这个指令来实现key的自动过期呢，反而放到应用代码判断key是否过期？ A1：我们的分布式锁开发...

2020-08-21

639

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。