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))

```

编译器都分为三个步骤：

1. Parsing 解析

2. Transformation 转义

3. Code Generation 代码生成

### Parsing 解析

Parsing阶段分红两个子阶段，

1. Lexical Analysis 词法分析

2. Syntactic Analysis语法分析，

先写好咱们要转化的代码

```js

// 这是咱们要转化的code

(add 2 (subtract 4 2))

```

#### Lexical Analysis 词法分析

Lexical Analysis 词法分析能够理解为把代码拆分红最小的独立的语法单元，去描述每个语法，能够是操做符，数字，标点符号等，最后生成token数组。

```js

// 第一步，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: ')' },

]

```

那咱们开始实现它吧，干！

```js

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。

```js

// 第二步，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。

```js

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，就是上文说道的遍历时调用的方法

```js

var visitor = {

NumberLiteral: {

enter(node, parent) { },

exit(node, parent) { },

}

};

```

因为深度优先遍历的特性，咱们遍历到一个节点时有enter和exit的概念，表明着遍历一些相似于CallExpression这样的节点时，这个语句，enter表示开始解析,exit表示解析完毕。好比说上文中：

```js

* -> 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做为参数，实现遍历，相似于：

```js

traverse(ast, {

CallExpression: {

enter(node, parent) {

// ...

},

exit(node, parent) {

// ...

},

}

})

```

先实现traverser吧。

```js

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的对比。

```js

* ----------------------------------------------------------------------------

* 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。

```js

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，则外层包裹一层ExpressionStatement

if (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的一个反过程。

```js

function codeGenerator(node) {

switch (node.type) {

// 针对于Program，处理其中的body属性，依次再递归调用codeGenerator

case '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(', ') +

')'

);

// 直接返回name

case 'Identifier':

return node.name;

// 返回数字的value

case 'NumberLiteral':

return node.value;

// 字符串类型添加双引号

case 'StringLiteral':

return '"' + node.value + '"';

// 容错处理

default:

throw new TypeError(node.type);

}

}

```

### 总结

这样咱们一个tiny-compiler就写好了，最后能够执行下面的代码去试试啦。

```js

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示例

```js

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形成的效果：

```js

// 源代码

const x = true;

// 转义后的的代码

const x = !0;

```

就是把全部的bool类型的值转化成 !0 或者 !1，这是代码压缩的时候使用的一个技巧。

那么逐行来分析这个简单的plugin。一个plugin就是一个function，入参就是babel对象，这里利用到了babel中types对象，来自于@babel/types这个库，而后操做path对象进行节点替换操做。

### path

path是确定会用到的一个对象。咱们能够用过path访问到当前节点，父节点，也能够去调用添加、更新、移动和删除节点有关的其余不少方法。举几个示例

```js

// 访问当前节点的属性，用path.node.property访问node的属性

path.node.node

path.node.left

// 直接改变当前节点的属性

path.node.name = "x";

// 当前节点父节点

path.parent

// 当前节点的父节点的path

path.parentPath

// 访问节点内部属性

path.get('left')

// 删除一个节点

path.remove();

// 替换一个节点

path.replaceWith();

// 替换成多个节点

path.replaceWithMultiple();

// 插入兄弟节点

path.insertBefore();

path.insertAfter();

// 跳过子节点的遍历

path.skip();

// 彻底跳过遍历

path.stop();

```

### @babel/types

能够理解它为一个工具库，相似于Lodash，里面封装了很是多的帮作方法，通常用处以下

* 检查节点

通常在类型前面加is就是判断是否该类型

```js

// 判断当前节点的left节点是不是identifier类型

if (t.isIdentifier(path.node.left)) {

// ...

}

```

```js

// 判断当前节点的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结构是不现实的，因此有了一些帮助方法去构建这些节点，示例：

```js

// 调用binaryExpression和identifier的构建方法，生成ast

t.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中的一些方法能够操做做用域，示例：

```js

// 检查变量n是否被绑定（是否在上下文已经有引用）

path.scope.hasBinding("n")

// 检查本身内部是否有引用n

path.scope.hasOwnBinding("n")

// 建立一个上下文中新的引用 生成相似于{ type: 'Identifier', name: '_n2' }

path.scope.generateUidIdentifier("n");

// 重命名当前的引用

path.scope.rename("n", "x");

```

## plugin实战

写一个自定义plugin是什么步骤呢？

1. 这个plugin用来干吗

2. 源代码的AST

3. 转换后代码的AST

tip: 能够去这个网站查看代码的AST。

### plugin的目的

如今就作一个自定义的plugin，你们在应用写代码的时候能够经过webpack配置alias，好比说配置@ -> ./src，这样import的时候就直接从src目录下找所须要的代码了，那么你们有在写组件的时候用过这个功能吗？这就是咱们这个plugin的目的。

### 代码

咱们有以下配置

```json

"alias": {

"@": "./src"

}

```

源代码以及要转化的代码以下：

```js

// ./src/index.js

import add from '@/common'; // -> import add from "./common";

​

​
复制代码

// ./src/foo/test/index.js

import add from '@/common'; // -> import add from "../../common";

​
复制代码

AST

源码的AST展现以下

那咱们看见是否是只须要找到ImportDeclaration节点中将source改为转换以后的代码是否是就能够了。

### 开始写plugin

```js

const localPath = require('path');

module.exports = function ({ types: t }) {

return {

visitor: {

ImportDeclaration(path, state) {

// 从state中拿到外界传进的参数，这里咱们外界设置了alias

const { 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类型的节点，赋值给source

path.node.source = t.StringLiteral(importSource)

}

},

};

}

```

### 用plugin

回到咱们的babel配置文件中来，这里咱们用的是babel.config.json

```json

{

"plugins": [

[

// 这里使用本地的文件当作plugin，实际上能够把本身制做的plugin发布成npm包供你们使用

"./plugin.js",

// 传配置到plugin的第二个参数state.opts中

{

"alias": {

"@": "./src"

}

}

]

]

}

```

这样一个plugin的流程就走完了，欢迎你们多多交流。