babel是什么？
用官方的解释就是Babel is a JavaScript compiler.Use next generation JavaScript, today. 什么意思呢？简单来说，就是新JavaScript特性已经出来了，但是浏览器并没有完全支持，为了能使用新特性，又能够在浏览器里使用，我们就需要借助babel了，babel会把新特性编译成浏览器能够识别的代码。这里可以测试查看通过babel编译前后的代码; 这里可以查看解析的AST语法树。
babel在编译时候，会把源代码分为两部分来处理：语法syntax、api。语法syntax比如const、let、模版字符串、扩展运算符等。 api比如Array.includes()等新函数。
@babel/core：
babel编译器。被拆分三个模块：
- @babel/parser: 接受源码，进行词法分析、语法分析，生成AST。
- @babel/traverse：接受一个AST，并对其遍历，根据preset、plugin进行逻辑处理，进行替换、删除、添加节点。
-
@babel/generator：接受最终生成的AST，并将其转换为代码字符串，同时此过程也可以创建source map。
babel转码流程：input string -> @babel/parser parser -> AST -> transformer[s] -> AST -> @babel/generator -> output string。
编译过程
上图中的plugins在.babelrc或babel.config.js里面配置，如果没有配置，则target code和source code是一样的。至于我们常见的配置：
module.exports = {
presets: [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
corejs: "3.6.4",
},
]
],
}
presets里面配置的@babel/env可以理解为一份“配置文件”，里面预设了哪些需要的plugins，因为我们开发一个项目可能经常导入这些插件，所以干脆把它们写成一个模板。如果presets里面缺少了某些plugin，如@babel/env里面没有可以识别装饰器的插件，就需要通过配置plugins属性将缺少的插件@babel/plugin-proposal-decorators导进来，无论是配置presets还是plugins，本质上还是都是导入需要的plugin，plugins只是提供了语法转换的规则,要转换API需要借助polyfill。
定义babel plugin
接下来我们就来了解一下如何开发一个babel插件，参考 开发插件
babel使用一种 访问者模式 来遍历整棵语法树，即遍历进入到每一个Node节点时，可以说我们在「访问」这个节点。访问者就是一个对象，定义了在一个树状结构中获取具体节点的方法。简单来说，我们可以在访问者中，使用Node的type来定义一个hook函数，Node的type有ClassDeclaration，FunctionDeclaration等，每一次遍历到对应type的Node时，hook函数就会被触发，我们可以在这个hook函数中，修改、查看、替换、删除这个节点。
一个傻瓜例子
目录结构
- 安装
@babel/core@babel/cli
yarn add -D @babel/core @babel/cli
- 创建自定义plugins文件。
本质上一个plugin就是一个函数, 函数接受一个babel对象(包含babel所有的api)，最后返回一个包含visitor属性的对象。visitor里面是什么？visitor属性中每个key都是一个ast节点的类型，值就是访问这个节点的函数。在遍历AST时，如果节点的type和visitor里面的key一样，则会触发对应的函数，对该节点进行操作。每个访问者函数都会接受两个参数：path和state。path对象表示两个节点之间连接的对象, state对象包含一些额外的状态信息，例如可以从state.opts中取出为插件配置的特定选项，甚至可以取出path对象，具体内容可以自己打印看看。以下这个插件什么也没做。
// src/babelPlugin/self_babel_plugin.js
module.exports = function (babel) {
return {
visitor: {
}
}
}
- 在
.babelrc配置自定义的文件
{
"plugins": [
["./src/babelPlugin/self_babel_plugin.js"]
]
}
我们的插件里并没做任何操作，所以我们编译出来的代码几乎和源码一样，除了可能会删除一些空格，如
- 现在我们有一段代码：
// src/babelPlugin/test.js
function Test() {
}
- 运行：将编译结果放入dist目录。
npx babel src/babelPlugin/test.js --out-dir dist // 这里编译你们自己的文件，下面的命令也是同样的道理
- 得到的结果
// dist/test.js
function Test() {}
开发一个plugin
现在我们重写src/babelPlugin/test.js代码：
// src/babelPlugin/test.js
function Test(a, b) {
return a $ b;
}
我们希望通过编译变成以下的样子：
function Test(a, b) {
return (a + b) * (a - b);
}
运行：npx babel src/babelPlugin/test.js --out-dir dist
报错
结合前面的知识，我们之所以能把一种代码编译成另一种样子，说白了就是babel plugin对AST做了操作，所以第一步是我们要拿到AST，但是上面我们直接编译报错了，看来我们要让babel识别$呀，那么怎么做？
正确编译成AST
- 首先在
types里面注册这个token,任意命名，这里我命名为addAndMinus
addAndMinus: new TokenType("$", {
beforeExpr,
binop: 9,
prefix,
startsExpr
}),
- 在
getTokenFromCode解析这个token, 因为$的unicode为36，且我们是把它当成操作符，所以调用finishOp方法
case 36:
this.finishOp(types$1.addAndMinus, 1);
return;
重新编译npx babel src/babelPlugin/test.js --out-dir dist，看下现在的结果：
编译成功
到这里已经能把
$正确解析为AST, 接下来就可以在遍历这棵树的时候操作节点了，即到了插件开发环节。
开发
前面讲了一大段都是在建立你的Babel知识，现在我们进入重头戏, babel plugin怎么写？ 我们希望$能够发挥它的作用，于是打开网址, 参考
image.png
可见我们要我们的插件要访问BinaryExpression类型的节点， 结合前面我们关于插件的知识，我们改写插件打印一下节点
// src/babelPlugin/self_babel_plugin.js
module.exports = function (babel) {
return {
visitor: {
BinaryExpression (path, statas) {
console.log(path.node)
}
}
}
}
运行npx babel src/babelPlugin/test.js，可见获取成功
节点信息
接下来我们就可以操作节点愉快地玩耍了。先看一下我们要的结果的AST，
image.png
可见原来的BinaryExpression节点的left和right都变成了BinaryExpression节点，所以我们借助@babel/types创建BinaryExpression节点，实现如下：
// src/babelPlugin/self_babel_plugin.js
module.exports = function (babel) {
return {
visitor: {
BinaryExpression (path, statas) {
const { node } = path
const { types: t } = babel
if (node.operator && node.operator.codePointAt() === 36) {
const {left: {name: leftName, value: leftValue}} = node
const {right: {name: rightName, value: rightValue}} = node
const leftNode = t.binaryExpression("+", leftName ? t.identifier(leftName) : t.numericLiteral(leftValue), rightName ? t.identifier(rightName) : t.numericLiteral(rightValue));
const rightNode = t.binaryExpression("-", leftName ? t.identifier(leftName) : t.numericLiteral(leftValue), rightName ? t.identifier(rightName) : t.numericLiteral(rightValue));
node.operator = '*'
node.left = leftNode
node.right = rightNode
}
}
}
}
}
运行npx babel src/babelPlugin/test.js --out-dir dist得到结果：
image.png
编译成功啦！！
我们改写
src/babelPlugin/test.js测试一下，
// src/babelPlugin/test.js
function Test(a, b) {
return a $ b;
}
console.log(10 $ 5)
重新编译得到：
image.png
变量名使用identifier 创建节点，数值使用numericLiteral创建节点。
上面的例子的编译过程，不使用babel命令，用代码实现如下
// src/babelPlugin/compile.js
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')
const path = require('path')
const fs = require('fs')
const content = fs.readFileSync(path.join(__dirname, 'test.js'), 'utf-8')
const ast = parser.parse(content, { sourceType: 'module'})
traverse(ast, { // 这一步其实就是我们要写的插件
BinaryExpression (path, statas) {
const { node } = path
const { types: t } = babel
if (node.operator && node.operator.codePointAt() === 36) {
const {left: {name: leftName, value: leftValue}} = node
const {right: {name: rightName, value: rightValue}} = node
const leftNode = t.binaryExpression("+", leftName ? t.identifier(leftName) : t.numericLiteral(leftValue), rightName ? t.identifier(rightName) : t.numericLiteral(rightValue));
const rightNode = t.binaryExpression("-", leftName ? t.identifier(leftName) : t.numericLiteral(leftValue), rightName ? t.identifier(rightName) : t.numericLiteral(rightValue));
node.operator = '*'
node.left = leftNode
node.right = rightNode
}
}
})
// console.log(ast)
const { code } = babel.transformFromAstSync(ast, null, {
// presets:["@babel/preset-env"]
})
console.log(code)
/**function Test(a, b) {
return (a + b) * (a - b);
}
*/
到这里，我们就知道了怎么去创建一个babel插件了。查看源码
参考：https://www.zhihu.com/question/277409645
网友评论