前言
相信大家Babel
肯定不陌生,但是其工作原理是什么可能了解的人就不太多了。
这次分享会大概介绍Babel
的工作原理以及怎么写一个Babel
插件。
Babel是什么?
Babel
是一个JavaScript
编译器,用于将 ECMAScript 2015+
版本的代码转换为向后兼容的 JavaScript
语法,以便能够运行在当前版本和旧版本的浏览器或其他环境中。
转译新标准引入的一些语法,比如:
- 箭头函数
- let/const
- class
- ES Module
- …
但也有一些新标准引入的全局变量、部分原生对象新增的原型链上的方法,Babel
无法解析,比如:
- 全局变量
- Promise
- Symbol
- WeakMap
- Set
- Map
- Array.includes
- generator函数
- …
对于上面的这些API,Babel
是不会转译的,需要引入polyfill
来解决。
简单来说,Babel
的工作就是:
- 语法转换
- 通过
Polyfill
的方式在目标环境中添加缺失的特性 - JS 源码转换
Babel 的使用
运行 babel 所需的基本环境
npm install i -S @babel/cli // Babel 提供的内建命令行工具
npm install i -S @babel/core // @babel/cli依赖的其内部的方法
安装完基本的包后,就是配置 Babel 配置文件,Babel 的配置文件有四种形式:
- babel.config.js
在项目的根目录(package.json
文件所在目录)下创建一个名为babel.config.js
的文件,并输入如下内容。
module.exports = function (api) {
api.cache(true);
const presets = [ ... ];
const plugins = [ ... ];
return {
presets,
plugins
};
}
- .babelrc
在你的项目中创建名为.babelrc
的文件
{
"presets": [...],
"plugins": [...]
}
- .babelrc.js
与.babelrc
的配置相同,你可以使用JavaScript
语法编写。
const presets = [ ... ];
const plugins = [ ... ];
module.exports = { presets, plugins };
- package.json
还可以选择将.babelrc
中的配置信息写到package.json
文件中
{
...
"babel": {
"presets": [ ... ],
"plugins": [ ... ],
}
}
四种配置方式作用都一样,你就合着自己的口味来,那种看着顺眼,你就翻它。
Babel 编译的三个阶段
Babel
的编译过程和大多数其他语言的编译器相似,可以分为三个阶段:
- 解析(Parsing):将代码字符串解析成抽象语法树。
- 转换(Transformation):对抽象语法树进行转换操作。
- 生成(Code Generation): 根据变换后的抽象语法树再生成代码字符串。
为了理解 Babel
,我们从最简单一句 console
命令下手
解析(Parsing)
Babel
拿到源代码会把代码抽象出来,变成 AST (抽象语法树)
什么是抽象语法树?
源代码的抽象语法结构的树状表示,树上的每个节点都表示源代码中的一种结构.
之所以说是抽象的,是因为抽象语法树并不会表示出真实语法出现的每一个细节,比如说,嵌套括号被隐含在树的结构中,并没有以节点的形式呈现,它们主要用于源代码的简单转换。
console.log('jpd')
的 AST 长这样:(可以自己进行尝试astexplorer)
{
"type": "Program",
"body": [
{
"type": "ExpressionStatement",
"expression": {
"type": "CallExpression",
"callee": {
"type": "MemberExpression",
"computed": false,
"object": {
"type": "Identifier",
"name": "console"
},
"property": {
"type": "Identifier",
"name": "log"
}
},
"arguments": [
{
"type": "Literal",
"value": "jpd",
"raw": "'jpd'"
}
]
}
}
],
"sourceType": "script"
}
AST是怎么来的?
整个解析过程分为两个步骤:
- 分词:将整个代码字符串分割成语法单元数组
语法单元通俗点说就是代码中的最小单元,不能再被分割,就像原子是化学变化中的最小粒子一样。
Javascript
代码中的语法单元主要包括以下这么几种:- 关键字:const、 let、 var 等
- 标识符:可能是一个变量,也可能是 if、else 这些关键字,又或者是 true、false 这些常量
- 运算符
- 数字
- 空格
- 注释:对于计算机来说,知道是这段代码是注释就行了,不关心其具体内容
其实分词说白了就是简单粗暴地对字符串一个个遍历。
以下为模拟分词的过程:
function tokenizer(input) {
const tokens = [];
const punctuators = [',', '.', '(', ')', '=', ';'];
let current = 0;
while (current < input.length) {
let char = input[current];
if (punctuators.indexOf(char) !== -1) {
tokens.push({
type: 'Punctuator',
value: char,
});
current++;
continue;
}
// 检查空格,连续的空格放到一起
let WHITESPACE = /\s/;
if (WHITESPACE.test(char)) {
current++;
continue;
}
// 标识符是字母、$、_开始的
if (/[a-zA-Z\$\_]/.test(char)) {
let value = '';
while(/[a-zA-Z0-9\$\_]/.test(char)) {
value += char;
char = input[++current];
}
tokens.push({ type: 'Identifier', value });
continue;
}
// 数字从0-9开始,不止一位
const NUMBERS = /[0-9]/;
if (NUMBERS.test(char)) {
let value = '';
while (NUMBERS.test(char)) {
value += char;
char = input[++current];
}
tokens.push({ type: 'Numeric', 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;
}
// 最后遇到不认识到字符就抛个异常出来
throw new TypeError('Unexpected charactor: ' + char);
}
return tokens;
}
const input = `console.log("jpd");`
console.log(tokenizer(input));
结果如下:
[
{
"type": "Identifier",
"value": "console"
},
{
"type": "Punctuator",
"value": "."
},
{
"type": "Identifier",
"value": "log"
},
{
"type": "Punctuator",
"value": "("
},
{
"type": "String",
"value": "'jpd'"
},
{
"type": "Punctuator",
"value": ")"
},
{
"type": "Punctuator",
"value": ";"
}
]
- 语法分析:建立分析语法单元之间的关系
语义分析则是将得到的词汇进行一个立体的组合,确定词语之间的关系。考虑到编程语言的各种从属关系的复杂性,语义分析的过程又是在遍历得到的语法单元组,相对而言就会变得更复杂。
简单来说语法分析是对语句和表达式识别,这是个递归过程,在解析中,Babel 会在解析每个语句和表达式的过程中设置一个暂存器,用来暂存当前读取到的语法单元,如果解析失败,就会返回之前的暂存点,再按照另一种方式进行解析,如果解析成功,则将暂存点销毁,不断重复以上操作,直到最后生成对应的语法树。
转换(Transformation)
Plugins
插件是用来定义如何转换你的代码的。在 Babel
的配置项中填写需要使用的插件名称,Babel
在编译的时候就会去加载 node_modules
中对应的 npm
包,然后编译插件对应的语法。
插件应用于 Babel
的转译过程,尤其是第二个阶段 Transformation
,如果这个阶段不使用任何插件,那么 Babel
会原样输出代码。
Presets
预设就是一堆插件(Plugin)的组合,从而达到某种转译的能力,就比如 react
中使用到的 @babel/preset-react
,它就是下面几种插件的组合。
-
@babel/plugin-syntax-jsx
-
@babel/plugin-transform-react-jsx
-
@babel/plugin-transform-react-display-name
当然我们也可以手动的在 plugins 中配置一系列的 plugin 来达到目的,就像这样:
{
"plugins":["@babel/plugin-syntax-jsx","@babel/plugin-transform-react-jsx","@babel/plugin-transform-react-display-name"]
}
但是这样一方面显得不那么优雅,另一方面增加了使用者的使用难度。如果直接使用预设就清新脱俗多了~
{
"presets":["@babel/preset-react"]
}
Plugin/Preset 排序
Plugin
会运行在Preset
之前。Plugin
会从第一个开始顺序执行。Preset
的顺序则刚好相反(从最后一个逆序执行)。
例如:
{
"plugins": [
"transform-decorators-legacy",
"transform-class-properties"
]
}
将先执行 transform-decorators-legacy
再执行 transform-class-properties
但 preset
是反向的
{
"presets": [
"es2015",
"react",
"vue"
]
}
会按以下顺序运行: vue, react, 最后 es2015。
那么问题来了,如果 presets
和 plugins
同时存在,那执行顺序又是怎样的呢?答案是先执行 plugins
的配置,再执行 presets
的配置。
// .babelrc 文件
{
"presets": [
[
"@babel/preset-env",
"@babel/preset-dep"
]
],
"plugins": [
["@babel/plugin-proposal-decorators", { "legacy": true }],
["@babel/plugin-proposal-class-properties", { "loose": true }],
"@babel/plugin-transform-runtime",
]
}
所以以上代码执行的顺序为
@babel/plugin-proposal-decorators -> @babel/plugin-proposal-class-properties -> @babel/plugin-transform-runtime -> @babel/preset-dep -> @babel/preset-env
生成(Code Generation)
用 babel-generator
通过 AST 树生成 ES5 代码
如何编写一个 Babel 插件
基础的东西讲了些,下面说下具体如何写插件,只做简单的介绍,感兴趣的同学可以看 Babel
官方的介绍。Plugin Development
- 插件格式
export default function({ types }) { // 接收了当前 Babel 对象作为参数
// 返回一个对象,其visitor属性是这个插件的主要访问者
return {
visitor: { // visitor 中的每个函数接收 2 个参数:path 和 state
CallExpression(path, state) {}
}
};
};
- 写一个简单的插件
我们先写一个简单的插件,把所有定义变量名为a
的换成b
,先从 astexplorer 看下var a = 1
的 AST
{
"type": "Program",
"body": [
{
"type": "VariableDeclaration",
"declarations": [
{
"type": "VariableDeclarator",
"start": 4,
"end": 9,
"id": {
"type": "Identifier",
"start": 4,
"end": 5,
"name": "a"
},
"init": {
"type": "Literal",
"start": 8,
"end": 9,
"value": 1,
"raw": "1"
}
}
],
"kind": "var"
}
],
"sourceType": "module"
}
从这里看,要找的节点类型就是 VarialeDeclarator
,下面开始撸代码
export default function({ types }) {
return {
visitor: {
VariableDeclarator(path, state) {
if (path.node.id.name == 'a') {
path.node.id = t.identifier('b')
}
}
}
}
}
我们要把 id
属性是 a
的替换成 b
就好了。但是这里不能直接 path.node.id.name = 'b'
。如果操作的是Object,就没问题,但是这里是 AST 语法树,所以想改变某个值,就是用对应的 AST 来替换,现在我们用新的标识符来替换这个属性。
import * as babel from '@babel/core';
const c = `var a = 1`;
const { code } = babel.transform(c, {
plugins: [
function({ types }) {
return {
visitor: {
VariableDeclarator(path, state) {
if (path.node.id.name == 'a') {
path.node.id = t.identifier('b')
}
}
}
}
}
]
})
console.log(code); // var b = 1
Babel 常用 API
-
@babel/core
Babel
的编译器,核心 API 都在这里面,比如常见的transform
、parse
。 -
@babel/cli
cli
是命令行工具, 安装了@babel/cli
就能够在命令行中使用babel
命令来编译文件。当然我们一般不会用到,打包工具已经帮我们做好了。@babel/cli
在执行的时候会依赖@babel/core
提供的生成 AST 相关的方法,所以安装完@babel/cli
后还需要安装@babel/core
。 -
@babel/node
直接在node
环境中,运行 ES6 的代码 (全局安装) -
babylon
x
的解析器 -
babel-traverse
用于对 AST 的遍历,维护了整棵树的状态,并且负责替换、移除和添加节点。 -
babel-types
用于 AST 节点的 Lodash 式工具库, 它包含了构造、验证以及变换 AST 节点的方法,对编写处理 AST 逻辑非常有用。 -
babel-generator
Babel
的代码生成器,它读取 AST 并将其转换为代码和源码映射(sourcemaps)