babel是怎样工做的

时间 2020-12-27

标签 javascript css 前端 java node python 程序员面试 json segmentfault 栏目 JavaScript 繁體版

原文原文链接

babel 本质上是个编译器，因此它所作的基本上就是编译器要作的事，为了不对编译器的某些东西讲的太细，咱们重点只要知道 babel 的工做流程就好了。javascript

转换成AST

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

但 babel 有几个内建的解析插件，这部份能够由plugin去开关，不过这通常也会经过官方的plugin去开关这些功能，主要是确保不会直接使用到babel内部的选项，这就是babel官方插件的名字中带有syntax的插件在作的事。前端

这里要介绍一个工具：AST Explorer，它可让你能够看到各类语言的 AST 语法树，也能够在这上面测试 babel 插件，这对要写 babel 插件的人来讲很是方便，后面会用这个工具来帮咱们写一个 babel 插件。先来一个例子：java

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

转成 AST 后大概就是这样，这里用 json 表示并省略了位置等信息：node

{
  "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 的对象，这个对象会包含这个节点的信息，也可让你访问它的父节点或子节点，同时在这个对象上也会有各类方法让你来修改节点的内容与结构，从而替换掉一个结点：python

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 的工做就结束了。json

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

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

欢迎继续阅读本专栏其它高赞文章：

更多文章...