babel 实质上是个编译器，所以它所做的基本上就是编译器要做的事，为了防止对编译器的某些货色讲的太细，咱们重点只有晓得 babel 的工作流程就行了。

转换成AST

第一步能够说是是编译器的基本功能，通过解析器将原始代码转换成形象语法树（AST），顾名思义就是形容语法的数据结构，个别在这一步编译器都会做两件事：语法分析与语义剖析。语法分析是去定义原始代码中的内容是否应该被认为一个单位，而后是语义剖析，判断这些单位组合而成的是否为语法，例如用于 for 循环等，在这一步中实际上插件简直什么也做不了，因为 babel 并不反对扭转解析的流程

但 babel 有几个内建的解析插件，这部份能够由plugin去开关，不过这个别也会通过官网的plugin去开关这些性能，次要是确保不会间接应用到babel外部的选项，这就是babel官网插件的名字中带有syntax的插件在做的事。

这里要介绍一个工具：AST Explorer，它能够让你能够看到各种语言的 AST 语法树，也能够在这下面测试 babel 插件，这对要写 babel 插件的人来说十分不便，前面会用这个工具来帮咱们写一个 babel 插件。先来一个例子：

function answer() {  return 'The answer to life, the universe and everything'}

转成 AST 后大略就是这样，这里用 json 示意并省略了地位等信息：

{  "type": "File",  "program": {    "type": "Program",    "body": [      {        "type": "FunctionDeclaration",        "id": {          "type": "Identifier",          "name": "answer"        },        "body": {          "type": "BlockStatement",          "body": [            {              "type": "ReturnStatement",              "argument": {                "type": "StringLiteral",                "value": "The answer to life, the universe and everything"              }            }          ]        }      }    ]  }}
补充：ASTExplorer 反对很多程序语言，js、css、go、python 等，有趣味能够玩玩。

遍历 AST

babel 会按程序拜访每个 AST 上的节点，并调用插件对应的函数，这一步才是插件要做的，在遍历时 babel 会为每个节点建设一个名为 Path 的对象，这个对象会蕴含这个节点的信息，也能够让你拜访它的父节点或子节点，同时在这个对象上也会有各种办法让你来批改节点的内容与构造，从而替换掉一个结点：

export default function (babel) {  const { types: t } = babel;    return {    visitor: {      StringLiteral(path) { // 如果遇到一个字符串常数        // 常数的内容是指定的字符串        if (path.node.value === 'The answer to life, the universe and everything') {          path.replaceWith(t.numericLiteral(42)) // 换成数字的 42        }      }    }  };}

下面的代码就能够用 AST Explorer 试试了，点击 AST Explorer 下面的 Transform 的菜单，抉择 babelv7 后，上面就会多一个编辑器让你输出，下面的代码就能够间接应用了

产生代码

最初 babel 会把批改过的 AST 再转回代码。

function answer() {  return 42;}

剩下的工作就是写入文件，或者再进一步解决。其实转换回代码后 babel 的工作就完结了。

本文首发微信公众号：前端先锋

欢送扫描二维码关注公众号，每天都给你推送陈腐的前端技术文章

欢送持续浏览本专栏其它高赞文章：

  • 深刻了解Shadow DOM v1
  • 一步步教你用 WebVR 实现虚拟现实游戏
  • 13个帮你进步开发效率的古代CSS框架
  • 疾速上手BootstrapVue
  • JavaScript引擎是如何工作的？从调用栈到Promise你须要晓得的所有
  • WebSocket实战：在 Node 和 React 之间进行实时通信
  • 对于 Git 的 20 个面试题
  • 深刻解析 Node.js 的 console.log
  • Node.js 到底是什么？
  • 30分钟用Node.js构建一个API服务器
  • Javascript的对象拷贝
  • 程序员30岁前月薪达不到30K，该何去何从
  • 14个最好的 JavaScript 数据可视化库
  • 8 个给前端的顶级 VS Code 扩大插件
  • Node.js 多线程齐全指南
  • 把HTML转成PDF的4个计划及实现
  • 更多文章...