babel是怎样工作的
babel 本质上是个编译器，所以它所做的基本上就是编译器要做的事，为了避免对编译器的某些东西讲的太细，我们重点只要知道 babel 的工作流程就行了。
转换成AST
第一步可以说是是编译器的基本功能，通过解析器将原始代码转换成抽象语法树（AST），顾名思义就是描述语法的数据结构，一般在这一步编译器都会做两件事：语法分析与语义分析。语法分析是去定义原始代码中的内容是否应该被认为一个单位，然后是语义分析，判断这些单位组合而成的是否为语法，例如用于 for 循环等，在这一步中实际上插件几乎什么也做不了，因为 babel 并不支持改变解析的流程。
但 babel 有几个内建的解析插件，这部份可以由plugin去开关，不过这一般也会通过官方的plugin去开关这些功能，主要是确保不会直接使用到babel内部的选项，这就是babel官方插件的名字中带有syntax的插件在做的事
这里要介绍一个工具：AST Explorer（https://astexplorer.net/），它可以让你可以看到各种语言的 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;
}
腾讯云开发者
