共计 1866 个字符,预计需要花费 5 分钟才能阅读完成。
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 个计划及实现
- 更多文章 …