babel原理&plugin实战
点击上方蓝字关注我们
本文将讲解babel是如何运行的，AST的结构，以及怎么创建一个babel的插件。
再讲babel之前，先不讲babel，AST的这些概念，先带你实现一个简易的babel解析器，这样再回过头来讲这些概念就容易理解多了。
tiny-compiler 编译器
想象一下我们有一些新特性的语法，其中add subtract是普通的函数名，需要转义到正常的javascript语法，以便让浏览器能够兼容的运行。
(add 2 2)(subtract 4 2)(add 2 (subtract 4 2))
要转义成如下
add(2, 2)subtract(4, 2)add(2, subtract(4, 2))
编译器都分为三个步骤：
Parsing解析Transformation转义Code Generation代码生成
Parsing 解析
Parsing阶段分成两个子阶段，
Lexical Analysis词法分析Syntactic Analysis语法分析，先写好我们要转化的代码
// 这是我们要转化的code(add 2 (subtract 4 2))
Lexical Analysis 词法分析
Lexical Analysis 词法分析可以理解为把代码拆分成最小的独立的语法单元，去描述每一个语法，可以是操作符，数字，标点符号等，最后生成token数组。
// 第一步，Lexical Analysis，转化成tokens类似如下[{ type: 'paren', value: '(' },{ type: 'name', value: 'add' },{ type: 'number', value: '2' },{ type: 'paren', value: '(' },{ type: 'name', value: 'subtract' },{ type: 'number', value: '4' },{ type: 'number', value: '2' },{ type: 'paren', value: ')' },{ type: 'paren', value: ')' },]
那我们开始实现它吧，干！
function tokenizer(input) {let current = 0;let tokens = [];while (current < input.length) {let char = input[current];// 处理(if (char === '(') {tokens.push({type: 'paren',value: '(',});current++;continue;}// 处理)if (char === ')') {tokens.push({type: 'paren',value: ')',});current++;continue;}// 处理空白字符let WHITESPACE = /\s/;if (WHITESPACE.test(char)) {current++;continue;}// 处理数字let NUMBERS = /[0-9]/;if (NUMBERS.test(char)) {let value = '';while (NUMBERS.test(char)) {value += char;char = input[++current];}tokens.push({ type: 'number', value });continue;}// 处理字符串if (char === '"') {let value = '';char = input[++current];while (char !== '"') {value += char;char = input[++current];}char = input[++current];tokens.push({ type: 'string', value });continue;}// 处理函数名let LETTERS = /[a-z]/i;if (LETTERS.test(char)) {let value = '';while (LETTERS.test(char)) {value += char;char = input[++current];}tokens.push({ type: 'name', value });continue;}// 报错提示throw new TypeError('I dont know what this character is: ' + char);}return tokens;}
Syntactic Analysis 语法分析
Syntactic Analysis 语法分析就是根据上一步的tokens数组转化成语法之前的关系，这就是Abstract Syntax Tree,也就是我们常说的AST。
// 第二步，Syntactic Analysis，转化成AST类似如下{type: 'Program',body: [{type: 'CallExpression',name: 'add',params: [{type: 'NumberLiteral',value: '2',}, {type: 'CallExpression',name: 'subtract',params: [{type: 'NumberLiteral',value: '4',}, {type: 'NumberLiteral',value: '2',}]}]}]}
我们再来实现一个parser，转化成AST。
function parser(tokens) {let current = 0;function walk() {let token = tokens[current];// 处理数字if (token.type === 'number') {current++;return {type: 'NumberLiteral',value: token.value,}}// 处理字符串if (token.type === 'string') {current++;return {type: 'StringLiteral',value: token.value,};}// 处理括号表达式if (token.type === 'paren' &&token.value === '(') {token = tokens[++current];let node = {type: 'CallExpression',name: token.value,params: [],};token = tokens[++current];while ((token.type !== 'paren') ||(token.type === 'paren' && token.value !== ')')) {node.params.push(walk());token = tokens[current];}current++;return node;}throw new TypeError(token.type);}let ast = {type: 'Program',body: [],};while (current < tokens.length) {ast.body.push(walk());}return ast;}
从上述代码来看，跟阶段AST是根节点是type=Program，body是一个嵌套的AST数组结构。再单独处理了number和string类型之后，再递归的调用walk函数，以解决嵌套的括号表达式。
Transformation 转义
traverser 遍历器
我们最终的目的肯定是想转化成我们想要的代码，那怎么转化呢？答案就是更改我们刚刚得到的AST结构。
那怎么去改AST呢？直接去操作这个树结构肯定是不现实的，所以我们需要遍历这个AST，利用深度优先遍历的方法遍历这些节点，当遍历到某个节点时，再去调用这个节点对应的方法，再方法里面改变这些节点的值就轻而易举了。
想象一下我们有这样的一个visitor，就是上文说道的遍历时调用的方法
var visitor = {NumberLiteral: {enter(node, parent) { },exit(node, parent) { },}};
由于深度优先遍历的特性，我们遍历到一个节点时有enter和exit的概念，代表着遍历一些类似于CallExpression这样的节点时，这个语句，enter表示开始解析,exit表示解析完毕。比如说上文中：
* -> Program (enter)* -> CallExpression (enter)* -> Number Literal (enter)* <- Number Literal (exit)* -> Call Expression (enter)* -> Number Literal (enter)* <- Number Literal (exit)* -> Number Literal (enter)* <- Number Literal (exit)* <- CallExpression (exit)* <- CallExpression (exit)* <- Program (exit)
然后有一个函数，接受ast和vistor作为参数，实现遍历，类似于：
traverse(ast, {CallExpression: {enter(node, parent) {// ...},exit(node, parent) {// ...},}})
先实现traverser吧。
function traverser(ast, visitor) {// 遍历一个数组节点function traverseArray(array, parent) {array.forEach(child => {traverseNode(child, parent);});}// 遍历节点function traverseNode(node, parent) {let methods = visitor[node.type];// 先执行enter方法if (methods && methods.enter) {methods.enter(node, parent);}switch (node.type) {// 一开始节点的类型是Program，去接着解析body字段case 'Program':traverseArray(node.body, node);break;// 当节点类型是CallExpression，去解析params字段case 'CallExpression':traverseArray(node.params, node);break;// 数字和字符串没有子节点，直接执行enter和exit就好case 'NumberLiteral':case 'StringLiteral':break;// 容错处理default:throw new TypeError(node.type);}// 后执行exit方法if (methods && methods.exit) {methods.exit(node, parent);}}// 开始从根部遍历traverseNode(ast, null);}
transformer 转换器
有了traverser遍历器后，就开始遍历吧，先看看前后两个AST的对比。
* ----------------------------------------------------------------------------* Original AST | Transformed AST* ----------------------------------------------------------------------------* { | {* type: 'Program', | type: 'Program',* body: [{ | body: [{* type: 'CallExpression', | type: 'ExpressionStatement',* name: 'add', | expression: {* params: [{ | type: 'CallExpression',* type: 'NumberLiteral', | callee: {* value: '2' | type: 'Identifier',* }, { | name: 'add'* type: 'CallExpression', | },* name: 'subtract', | arguments: [{* params: [{ | type: 'NumberLiteral',* type: 'NumberLiteral', | value: '2'* value: '4' | }, {* }, { | type: 'CallExpression',* type: 'NumberLiteral', | callee: {* value: '2' | type: 'Identifier',* }] | name: 'subtract'* }] | },* }] | arguments: [{* } | type: 'NumberLiteral',* | value: '4'* ---------------------------------- | }, {* | type: 'NumberLiteral',* | value: '2'* | }]* (sorry the other one is longer.) | }* | }* | }]* | }* ----------------------------------------------------------------------------*/
这里注意多了一中ExpressionStatement的type，以表示subtract(4, 2)这样的结构。
遍历的过程就是把左侧AST转化成右侧AST。
function transformer(ast) {let newAst = {type: 'Program',body: [],};// 给节点一个_context,让遍历到子节点时可以push内容到parent._context中ast._context = newAst.body;traverser(ast, {CallExpression: {enter(node, parent) {let expression = {type: 'CallExpression',callee: {type: 'Identifier',name: node.name,},arguments: [],};// 让子节点可以push自己到expression.arguments中node._context = expression.arguments;// 如果父节点不是CallExpression，则外层包裹一层ExpressionStatementif (parent.type !== 'CallExpression') {expression = {type: 'ExpressionStatement',expression: expression,};}parent._context.push(expression);}},NumberLiteral: {enter(node, parent) {parent._context.push({type: 'NumberLiteral',value: node.value,});}},StringLiteral: {enter(node, parent) {parent._context.push({type: 'StringLiteral',value: node.value,});},},});return newAst;}
CodeGeneration 代码生成
那最后一个阶段就是用心生成的AST生成我们最后的代码了，也是生成AST的一个反过程。
function codeGenerator(node) {switch (node.type) {// 针对于Program，处理其中的body属性，依次再递归调用codeGeneratorcase 'Program':return node.body.map(codeGenerator).join('\n');// 针对于ExpressionStatement，处理其中的expression属性，再后面添加一个分号case 'ExpressionStatement':return (codeGenerator(node.expression) +';');// 针对于CallExpression，左侧处理callee，括号中处理arguments数组case 'CallExpression':return (codeGenerator(node.callee) +'(' +node.arguments.map(codeGenerator).join(', ') +')');// 直接返回namecase 'Identifier':return node.name;// 返回数字的valuecase 'NumberLiteral':return node.value;// 字符串类型添加双引号case 'StringLiteral':return '"' + node.value + '"';// 容错处理default:throw new TypeError(node.type);}}
总结
这样我们一个tiny-compiler就写好了，最后可以执行下面的代码去试试啦。
function compiler(input) {let tokens = tokenizer(input);let ast = parser(tokens);let newAst = transformer(ast);let output = codeGenerator(newAst);return output;}
从上述代码中就可以看出来，一个代码转化的过程就把包括了tokenizer词法分析阶段，parser预发分析阶段（AST生成），transformer转义阶段，codeGenerator代码生成阶段。那么在写babel-plugin的时候，其实就是在写其中的transformer，其他的部分已经被babel完美的实现了。
babel plugin 概念
先上手看一个简单的babel plugin示例
module.exports = function ({ types: t }) {const TRUE = t.unaryExpression("!", t.numericLiteral(0), true);const FALSE = t.unaryExpression("!", t.numericLiteral(1), true);return {visitor: {BooleanLiteral(path) {path.replaceWith(path.node.value ? TRUE : FALSE)}},};}
这个plugin造成的效果：
// 源代码const x = true;// 转义后的的代码const x = !0;
就是把所有的bool类型的值转化成 !0 或者 !1，这是代码压缩的时候使用的一个技巧。
那么逐行来分析这个简单的plugin。一个plugin就是一个function，入参就是babel对象，这里利用到了babel中types对象，来自于@babel/types这个库，然后操作path对象进行节点替换操作。
path
path是肯定会用到的一个对象。我们可以用过path访问到当前节点，父节点，也可以去调用添加、更新、移动和删除节点有关的其他很多方法。举几个示例
// 访问当前节点的属性，用path.node.property访问node的属性path.node.nodepath.node.left// 直接改变当前节点的属性path.node.name = "x";// 当前节点父节点path.parent// 当前节点的父节点的pathpath.parentPath// 访问节点内部属性path.get('left')// 删除一个节点path.remove();// 替换一个节点path.replaceWith();// 替换成多个节点path.replaceWithMultiple();// 插入兄弟节点path.insertBefore();path.insertAfter();// 跳过子节点的遍历path.skip();// 完全跳过遍历path.stop();
@babel/types
可以理解它为一个工具库，类似于Lodash，里面封装了非常多的帮做方法，一般用处如下
检查节点 一般在类型前面加
is就是判断是否该类型
// 判断当前节点的left节点是否是identifier类型if (t.isIdentifier(path.node.left)) {// ...}// 判断当前节点的left节点是否是identifer类型，并且name='n'if (t.isIdentifier(path.node.left, { name: "n" })) {// ...}// 上述判断等价于if (path.node.left != null &&path.node.left.type === "Identifier" &&path.node.left.name === "n") {// ...}
构建节点
直接手写复杂的AST结构是不现实的，所以有了一些帮助方法去构建这些节点，示例：
// 调用binaryExpression和identifier的构建方法，生成astt.binaryExpression("*", t.identifier("a"), t.identifier("b"));// 生成如下{type: "BinaryExpression",operator: "*",left: {type: "Identifier",name: "a"},right: {type: "Identifier",name: "b"}}// 最后经过AST反转回来如下a * b
其中每一种节点都有自己的构造方法，都有自己特定的入参，详细请参考官方文档
scope
最后讲一下作用域的概念，每一个函数，每一个变量都有自己的作用域，在编写babel plugin的时候要特别小心，再改变或者添加代码的时候要注意不要破坏了原有的代码结构。
用path.scope中的一些方法可以操作作用域，示例：
// 检查变量n是否被绑定（是否在上下文已经有引用）path.scope.hasBinding("n")// 检查自己内部是否有引用npath.scope.hasOwnBinding("n")// 创建一个上下文中新的引用 生成类似于{ type: 'Identifier', name: '_n2' }path.scope.generateUidIdentifier("n");// 重命名当前的引用path.scope.rename("n", "x");
plugin实战
写一个自定义plugin是什么步骤呢？
这个plugin用来干嘛
源代码的AST
转换后代码的AST
tip: 可以去这个网站查看代码的AST。
plugin的目的
现在就做一个自定义的plugin，大家在应用写代码的时候可以通过webpack配置alias，比如说配置@ -> ./src，这样import的时候就直接从src目录下找所需要的代码了，那么大家有在写组件的时候用过这个功能吗？这就是我们这个plugin的目的。
代码
我们有如下配置
"alias": {"@": "./src"}
源代码以及要转化的代码如下：
// ./src/index.jsimport add from '@/common'; // -> import add from "./common";// ./src/foo/test/index.jsimport add from '@/common'; // -> import add from "../../common";
AST
源码的AST展示如下
那我们看见是不是只需要找到ImportDeclaration节点中将source改成转换之后的代码是不是就可以了。
开始写plugin
const localPath = require('path');module.exports = function ({ types: t }) {return {visitor: {ImportDeclaration(path, state) {// 从state中拿到外界传进的参数，这里我们外界设置了aliasconst { alias } = state.opts;if (!alias) {return;}// 拿到当前文件的信息const { filename, root } = state.file.opts;// 找到相对地址const relativePath = localPath.relative(root, localPath.dirname(filename));// 利用path获取当前节点中source的value，这里对应的就是 '@/common'了let importSource = path.node.source.value;// 遍历我们的配置，进行关键字替换Object.keys(alias).forEach(key => {const reg = new RegExp(`^${key}`);if (reg.test(importSource)) {importSource = importSource.replace(reg, alias[key]);importSource = localPath.relative(relativePath, importSource)}})// 利用t.StringLiteral构建器构建一个StringLiteral类型的节点，赋值给sourcepath.node.source = t.StringLiteral(importSource)}},};}
用plugin
回到我们的babel配置文件中来，这里我们用的是babel.config.json
{"plugins": [[// 这里使用本地的文件当做plugin，实际上可以把自己制作的plugin发布成npm包供大家使用"./plugin.js",// 传配置到plugin的第二个参数state.opts中{"alias": {"@": "./src"}}]]}
这样一个plugin的流程就走完了，欢迎大家多多交流。
推荐阅读