前言

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

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

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

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 尝试一下。

一个小 ：

  1. // es2015 的 const 和 arrow function
  2. const add = (a, b) => a + b;
  4. // Babel 转译后
  5. var add = function add(a, b) {
  6.   return a + b;
  7. };

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 会是怎样的：

  1. {
  2.   "type": "Program",
  3.   "body": [
  4.     {
  5.       "type": "VariableDeclaration", // 变量声明
  6.       "declarations": [
  7.         // 具体声明
  8.         {
  9.           "type": "VariableDeclarator", // 变量声明
  10.           "id": {
  11.             "type": "Identifier", // 标识符（最基础的）
  12.             "name": "add" // 函数名
  13.           },
  14.           "init": {
  15.             "type": "ArrowFunctionExpression", // 箭头函数
  16.             "id": null,
  17.             "expression": true,
  18.             "generator": false,
  19.             "params": [
  20.               // 参数
  21.               {
  22.                 "type": "Identifier",
  23.                 "name": "a"
  24.               },
  25.               {
  26.                 "type": "Identifier",
  27.                 "name": "b"
  28.               }
  29.             ],
  30.             "body": {
  31.               // 函数体
  32.               "type": "BinaryExpression", // 二项式
  33.               "left": {
  34.                 // 二项式左边
  35.                 "type": "Identifier",
  36.                 "name": "a"
  37.               },
  38.               "operator": "+", // 二项式运算符
  39.               "right": {
  40.                 // 二项式右边
  41.                 "type": "Identifier",
  42.                 "name": "b"
  43.               }
  44.             }
  45.           }
  46.         }
  47.       ],
  48.       "kind": "const"
  49.     }
  50.   ],
  51.   "sourceType": "module"
  52. }

我们可以通过一棵“树”来更为直观地展示这句代码的 AST(从第二层的 declarations 开始)：

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

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

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

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

如果想要了解更多，可以阅读和尝试：

Babel 工作过程

了解了 AST 是什么样的，就可以开始研究 Babel 的工作过程了。

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

大多数编译器的工作过程可以分为三部分：

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

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

  1. var add = function add(a, b) {
  2.   return a + b;
  3. };

Parse（解析）

一般来说，Parse 阶段可以细分为两个阶段：词法分析（Lexical Analysis, LA）和语法分析（Syntactic Analysis, SA）。

词法分析

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

  1. [
  2.   { "type": "Keyword", "value": "const" },
  3.   { "type": "Identifier", "value": "add" },
  4.   { "type": "Punctuator", "value": "=" },
  5.   { "type": "Punctuator", "value": "(" },
  6.   { "type": "Identifier", "value": "a" },
  7.   { "type": "Punctuator", "value": "," },
  8.   { "type": "Identifier", "value": "b" },
  9.   { "type": "Punctuator", "value": ")" },
  10.   { "type": "Punctuator", "value": "=>" },
  11.   { "type": "Identifier", "value": "a" },
  12.   { "type": "Punctuator", "value": "+" },
  13.   { "type": "Identifier", "value": "b" }
  14. ]

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

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

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

  1. /**
  2.  * 词法分析 tokenize
  3.  * @param {string} code JavaScript 代码
  4.  * @return {Array} token
  5.  */
  6. function tokenize(code) {
  7.   if (!code || code.length === 0) {
  8.     return [];
  9.   }
  10.   var current = 0; // 记录位置
  11.   var tokens = []; // 定义一个空的 token 数组
  13.   var LETTERS = /[a-zA-Z\$\_]/i;
  14.   var KEYWORDS = /const/; //  模拟一下判断是不是关键字
  15.   var WHITESPACE = /\s/;
  16.   var PARENS = /\(|\)/;
  17.   var NUMBERS = /[0-9]/;
  18.   var OPERATORS = /[+*/-]/;
  19.   var PUNCTUATORS = /[~!@#$%^&*()/\|,.<>?"';:_+-=\[\]{}]/;
  21.   // 从第一个字符开始遍历
  22.   while (current < code.length) {
  23.     var char = code[current];
  24.     // 判断空格
  25.     if (WHITESPACE.test(char)) {
  26.       current++;
  27.       continue;
  28.     }
  29.     // 判断连续字符
  30.     if (LETTERS.test(char)) {
  31.       var value = '';
  32.       var type = 'Identifier';
  33.       while (char && LETTERS.test(char)) {
  34.         value += char;
  35.         char = code[++current];
  36.       }
  37.       // 判断是否是关键字
  38.       if (KEYWORDS.test(value)) {
  39.         type = 'Keyword';
  40.       }
  41.       tokens.push({
  42.         type: type,
  43.         value: value,
  44.       });
  45.       continue;
  46.     }
  47.     // 判断小括号
  48.     if (PARENS.test(char)) {
  49.       tokens.push({
  50.         type: 'Paren',
  51.         value: char,
  52.       });
  53.       current++;
  54.       continue;
  55.     }
  56.     // 判断连续数字
  57.     if (NUMBERS.test(char)) {
  58.       var value = '';
  59.       while (char && NUMBERS.test(char)) {
  60.         value += char;
  61.         char = code[++current];
  62.       }
  63.       tokens.push({
  64.         type: 'Number',
  65.         value: value,
  66.       });
  67.       continue;
  68.     }
  69.     // 判断运算符
  70.     if (OPERATORS.test(char)) {
  71.       tokens.push({
  72.         type: 'Operator',
  73.         value: char,
  74.       });
  75.       current++;
  76.       continue;
  77.     }
  78.     // 判断箭头函数
  79.     if (PUNCTUATORS.test(char)) {
  80.       var value = char;
  81.       var type = 'Punctuator';
  82.       var temp = code[++current];
  83.       if (temp === '>') {
  84.         type = 'ArrowFunction';
  85.         value += temp;
  86.         current++;
  87.       }
  88.       tokens.push({
  89.         type: type,
  90.         value: value,
  91.       });
  92.       continue;
  93.     }
  94.     tokens.push({
  95.       type: 'Identifier',
  96.       value: char,
  97.     });
  98.     current++;
  99.   }
  100.   return tokens;
  101. }

上面这个 tokenize 函数只是自己实现以下，与实际上 Babel 的实现方式还是差不少的，如果感兴趣可以看看https://github.com/babel/babel/blob/master/packages/babel-parser/src/tokenizer

我们来测试一下：

  1. const tokens = tokenize('const add = (a, b) => a + b')；
  2. console.log(tokens);
  4. [
  5.   { "type": "Keyword", "value": "const" },
  6.   { "type": "Identifier", "value": "add" },
  7.   { "type": "Punctuator", "value": "=" },
  8.   { "type": "Paren", "value": "(" },
  9.   { "type": "Identifier", "value": "a" },
  10.   { "type": "Punctuator", "value": "," },
  11.   { "type": "Identifier", "value": "b" },
  12.   { "type": "Paren", "value": ")" },
  13.   { "type": "ArrowFunction", "value": "=>" },
  14.   { "type": "Identifier", "value": "a" },
  15.   { "type": "Operator", "value": "+" },
  16.   { "type": "Identifier", "value": "b" }
  17. ]

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

语法分析

词法分析之后，代码就已经变成了一个 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 节点：

  1. {
  2.   "type": "Identifier",
  3.   "name": "add"
  4. }

表示这是一个标识符。

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

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

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

还是上面的 ：

  1. {
  2.   "type": "Program",
  3.   "body": [
  4.     {
  5.       "type": "VariableDeclaration", // 变量声明
  6.       "declarations": [
  7.         // 具体声明
  8.         {
  9.           "type": "VariableDeclarator", // 变量声明
  10.           "id": {
  11.             "type": "Identifier", // 标识符（最基础的）
  12.             "name": "add" // 函数名
  13.           },
  14.           "init": {
  15.             "type": "ArrowFunctionExpression", // 箭头函数
  16.             "id": null,
  17.             "expression": true,
  18.             "generator": false,
  19.             "params": [
  20.               // 参数
  21.               {
  22.                 "type": "Identifier",
  23.                 "name": "a"
  24.               },
  25.               {
  26.                 "type": "Identifier",
  27.                 "name": "b"
  28.               }
  29.             ],
  30.             "body": {
  31.               // 函数体
  32.               "type": "BinaryExpression", // 二项式
  33.               "left": {
  34.                 // 二项式左边
  35.                 "type": "Identifier",
  36.                 "name": "a"
  37.               },
  38.               "operator": "+", // 二项式运算符
  39.               "right": {
  40.                 // 二项式右边
  41.                 "type": "Identifier",
  42.                 "name": "b"
  43.               }
  44.             }
  45.           }
  46.         }
  47.       ],
  48.       "kind": "const"
  49.     }
  50.   ],
  51.   "sourceType": "module"
  52. }

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

  1. 声明了一个变量，并且知道了它的内部属性（id、init），然后我们再以此访问每一个属性以及它们的子节点。
  2. id 是一个 Idenrifier，有一个 name 属性表示变量名。
  3. 之后是 init，init 也有好几个内部属性：
  • type 是ArrowFunctionExpression，表示这是一个箭头函数表达式
  • params 是这个箭头函数的入参，其中每一个参数都是一个 Identifier 类型的节点；
  • body 属性是这个箭头函数的主体，这是一个 BinaryExpression 二项式：left、operator、right，分别表示二项式的左边变量、运算符以及右边变量。

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

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

Visitor

一个 Visitor 一般来说是这样的：

  1. var visitor = {
  2.   ArrowFunction() {
  3.     console.log('我是箭头函数');
  4.   },
  5.   IfStatement() {
  6.     console.log('我是一个if语句');
  7.   },
  8.   CallExpression() {},
  9. };

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

这只是一个简单的 Visitor。

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

  1. var visitor = {
  2.   Identifier: {
  3.     enter() {
  4.       console.log('Identifier enter');
  5.     },
  6.     exit() {
  7.       console.log('Identifier exit');
  8.     },
  9.   },
  10. };

比如我们拿这个 visitor 来遍历这样一个 AST：

  1. {
  2.   "params": [
  3.     // 参数
  4.     {
  5.       "type": "Identifier",
  6.       "name": "a"
  7.     },
  8.     {
  9.       "type": "Identifier",
  10.       "name": "b"
  11.     }
  12.   ]
  13. }

过程可能是这样的...

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

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

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

  1. import * as t from '@babel/types';
  3. var visitor = {
  4.   ArrowFunction(path) {
  5.     path.replaceWith(t.FunctionDeclaration(id, params, body));
  6.   },
  7. };

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

Generate(代码生成)

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

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

  1. class Generator extends Printer {
  2.   constructor(ast, opts = {}, code) {
  3.     const format = normalizeOptions(code, opts);
  4.     const map = opts.sourceMaps ? new SourceMap(opts, code) : null;
  5.     super(format, map);
  6.     this.ast = ast;
  7.   }
  8.   ast: Object;
  9.   generate() {
  10.     return super.generate(this.ast);
  11.   }
  12. }

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

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

参考链接

更多原创文章欢迎关注公众号「玩相机的程序员」，也可添加个人微信 「xb9207」 交流讨论。

初学 Babel 工作原理的更多相关文章

  1. 初学Kafka工作原理流程介绍

    Apache kafka 工作原理介绍 消息队列技术是分布式应用间交换信息的一种技术.消息队列可驻留在内存或磁盘上, 队列存储消息直到它们被应用程序读走.通过消息队列,应用程序可独立地执行--它们不需 ...

  2. 【Babel】293- 初学 Babel 工作原理

    戳蓝字「前端技术优选」关注我们哦! 前言 babel Babel 对于前端开发者来说应该是很熟悉了,日常开发中基本上是离不开它的. 已经9102了,我们已经能够熟练地使用 es2015+ 的语法.但是 ...

  3. How Javascript works (Javascript工作原理) (十五) 类和继承及 Babel 和 TypeScript 代码转换探秘

    个人总结:读完这篇文章需要15分钟,文章主要讲解了Babel和TypeScript的工作原理,(例如对es6 类的转换,是将原始es6代码转换为es5代码,这些代码中包含着类似于 _classCall ...

  4. Babel运行原理

    前言     之前翻博客园的时候,看到有人朋友分享阿里巴巴的面试题,其中有一道题就是关于ES6转ES5 原理的,当时我看到感觉到自己离去阿里巴巴的路还很远啊,像我们大部分做开发的时候,都只知其然不知 ...

  5. How Javascript works (Javascript工作原理) (四) 事件循环及异步编程的出现和 5 种更好的 async/await 编程方式

    个人总结: 1.讲解了JS引擎,webAPI与event loop合作的机制. 2.setTimeout是把事件推送给Web API去处理,当时间到了之后才把setTimeout中的事件推入调用栈. ...

  6. 菜鸟学Struts2——Struts工作原理

    在完成Struts2的HelloWorld后,对Struts2的工作原理进行学习.Struts2框架可以按照模块来划分为Servlet Filters,Struts核心模块,拦截器和用户实现部分,其中 ...

  7. 【夯实Nginx基础】Nginx工作原理和优化、漏洞

    本文地址 原文地址 本文提纲: 1.  Nginx的模块与工作原理    2.  Nginx的进程模型    3 . NginxFastCGI运行原理        3.1 什么是 FastCGI   ...

  8. HashMap的工作原理

    HashMap的工作原理   HashMap的工作原理是近年来常见的Java面试题.几乎每个Java程序员都知道HashMap,都知道哪里要用HashMap,知道HashTable和HashMap之间 ...

  9. 【Oracle 集群】ORACLE DATABASE 11G RAC 知识图文详细教程之RAC 工作原理和相关组件（三）

    RAC 工作原理和相关组件(三) 概述:写下本文档的初衷和动力,来源于上篇的<oracle基本操作手册>.oracle基本操作手册是作者研一假期对oracle基础知识学习的汇总.然后形成体 ...

随机推荐

  1. uniapp 发起网络请求

    推荐下我写的uni-http 创建http-config.js import Vue from 'vue' const BASE_URL = 'http://xxx.com'; if (process ...

  2. 「NGK每日快讯」2021.1.5日NGK第63期官方快讯!

  3. TCP编程详解

    目录 数据包格式 建立连接(三次握手) 数据传输 断开连接(四次挥手) 基础 客户端流程 编码 TCP服务端流程 TCP服务端编码 参考文献 TCP把连接作为最基本的对象,每一条TCP连接都有两个端点 ...

  4. [转]什么是 C 和 C ++ 标准库？

    转载地址:https://www.cnblogs.com/findumars/p/9000371.html 简要介绍编写C/C ++应用程序的领域,标准库的作用以及它是如何在各种操作系统中实现的.我已 ...

  5. 微信小程序：快速生成less文件类嵌套的结构

    全部选中标签结构,按住ctrl+shift+p,选中插件Generate CSS tree(提前安装CSS Tree),先删除undefined,将img替换成image,删除标签名view. 完整的 ...

  6. JS中try catch的用法

    在js中也可以使用try/catch语法,把可能发生异常的代码使用try包裹起来,然后在catch中对异常进行处理,处理后就不会影响后面代码的执行. const a = null try { cons ...

  7. WPF -- 一种实现本地化的方法

    本文介绍一种WPF程序实现本地化的方法. 步骤 首先,假设xaml文件中存在一个Button按钮,内容为"按钮",实现本地化的步骤如下: 展开程序的Properties,双击Res ...

  8. 低功耗蓝牙 ATT/GATT/Service/Characteristic 规格解读

    什么是蓝牙service和characteristic?如何理解蓝牙profile? ATT和GATT两者如何区分?什么是attribute? attribute和characteristic的区别是 ...

  9. Java垃圾回收机制详解

    前言 Java 相比 C/C++ 最显著的特点便是引入了自动垃圾回收 (下文统一用 GC 指代自动垃圾回收),它解决了 C/C++ 最令人头疼的内存管理问题,让程序员专注于程序本身,不用关心内存回收这 ...

  10. System.Net.Mail邮件发送抄送附件(多个)

    /// <summary> /// 邮件发送抄送附件 /// </summary> /// <param name="mailTo">收件人(可 ...