关于前端:10-分钟-学会-手写一个-简单的-Babel-插件-操作AST-语法树

学习的背景（为啥要写一个 Babel 插件呢？）

es6 是如何转换为 es5 的？
什么是 AST 语法树呢，怎么对一个AST树的节点进行增删改查呢？
为啥之前 jsx须要手动导入 react ，当初不须要了？
国际化内容须要写 t 函数的中央太多，懒得写了。（业务方面）
任何你能够想到的骚操作。

1. babel 罕用包的介绍（写插件必备常识）

代码转语法树的官网：https://astexplorer.net/

1. Babylon 是Babel 的解析器，代码转为AST 语法树

npm init -y进行我的项目的初始化搭建
Babylon 是 Babel 的解析器，是将代码转换为 AST 语法树的工具，当初来装置它npm install --save babylon （PS:新版本的babel 改名为 @babel/parser，仅仅是名字的更改，上面局部包的名字也有所更改然而API 的用法大抵不变）
新增 babylon-demo.mjs （留神是mjs 结尾的，方便使用ESmodule语法），写入如下内容。调用 babylon.parse生成 ast 语法树

import * as babylon from "babylon";const code = `function square(n) {  return n * n;}`;const ast = babylon.parse(code);console.log(ast);// Node {//   type: "File",//   start: 0,//   end: 38,//   loc: SourceLocation {...},//   program: Node {...},//   comments: [],//   tokens: [...]// }

2. Babel-traverse 来操作 AST 语法树

npm install --save babel-traverse装置依赖。
利用语法树将 code 中的 n 替换为 x。（别急下一步就是依据新的语法树生成代码）

import * as babylon from "babylon";import traverse from "babel-traverse";const code = `function square(n) {  return n * n;}`;const ast = babylon.parse(code);// 对 形象语法树 一层层的 遍历traverse.default(ast, {  // 树 的节点 会 作为 参数 传入 enter 函数  enter(path) {    // 如果以后节点 是 Identifier 并且 name 是 n。就替换为 x    if (      path.node.type === "Identifier" &&      path.node.name === "n"    ) {      path.node.name = "x";    }  }});

3. `babel-generator`依据批改的语法树生成代码和源码映射（source map）

装置依赖 npm install --save babel-generator
将AST 语法树生成代码

import * as babylon from "babylon";import traverse from "babel-traverse";import generate from "babel-generator";// 原始代码const code = `function square(n) {  return n * n;}`;// ast 是对象 属于援用型const ast = babylon.parse(code);// 对 形象语法树 一层层的 遍历traverse.default(ast, {  // 树 的节点 会 作为 参数 传入 enter 函数  enter(path) {    // 如果以后节点 是 Identifier 并且 name 是 n。就替换为 x    // 因为 ast 是对象，所以 此处做的变更会 间接影响到 ast     if (      path.node.type === "Identifier" &&      path.node.name === "n"    ) {      path.node.name = "x";    }  },});// 对节点操作过当前的代码const targetCode = generate.default(ast).codeconsole.log('targetCode', targetCode)// targetCode function square(x) {//   return x * x;// }

4. 发现对节点的判断须要写的代码很多，抽离出公共的包来进行节点的判断。`babel-types`（AST节点里的 Lodash 式工具库）

装置：npm install --save babel-types
优化下面代码的 AST 节点的if 判断。

import * as babylon from "babylon";import traverse from "babel-traverse";import generate from "babel-generator";// 留神 node_modules 模块里 导出的是 defaultimport {default as t} from "babel-types";// 原始代码const code = `function square(n) {  return n * n;}`;// ast 是对象 属于援用型const ast = babylon.parse(code);// 对 形象语法树 一层层的 遍历traverse.default(ast, {  // 树 的节点 会 作为 参数 传入 enter 函数  enter(path) {    // 如果以后节点 是 Identifier 并且 name 是 n。就替换为 x    // 因为 ast 是对象，所以 此处做的变更会 间接影响到 ast     // if (    //   path.node.type === "Identifier" &&    //   path.node.name === "n"    // ) {    //   path.node.name = "x";    // }    if (t.isIdentifier(path.node, {name: "n"})) {      path.node.name = "x"    }  },});// 对节点操作过当前的代码const targetCode = generate.default(ast).codeconsole.log('targetCode', targetCode)// targetCode function square(x) {//   return x * x;// }

5. 通过AST 来生成CODE 可读性太差。应用`babel-template`来实现占位符的来生成代码。

装置依赖：npm install --save babel-template
以后的需要是：我不想手动导入文件 a 依赖。即：const a = require("a");这句话我不想写。
首先构建 ast 的模板：判断哪些是变量，哪些是语法。

// 构建模板const buildRequire = template(`  const IMPORT_NAME = require(SOURCE);`);

应用变量进行填充

// 创立ast const astImport = buildRequire({  IMPORT_NAME: t.identifier("a"),  SOURCE: t.stringLiteral("a")});

剖析何时塞入这段 ast 。应用 https://astexplorer.net/ 剖析得悉。代码和图片如下

import * as babylon from "babylon";import traverse from "babel-traverse";import generate from "babel-generator";import {default as template} from "babel-template";// 留神 node_modules 模块里 导出的是 defaultimport {default as t} from "babel-types";// 构建模板const buildRequire = template(`  const IMPORT_NAME = require(SOURCE);`);// 创立ast const astImport = buildRequire({  IMPORT_NAME: t.identifier("a"),  SOURCE: t.stringLiteral("a")});// 原始代码const code = `function square(n) {  return n * n;}`;// ast 是对象 属于援用型const ast = babylon.parse(code);// 对 形象语法树 一层层的 遍历traverse.default(ast, {  // 树 的节点 会 作为 参数 传入 enter 函数  enter(path) {    // 如果以后节点 是 Identifier 并且 name 是 n。就替换为 x    // 因为 ast 是对象，所以 此处做的变更会 间接影响到 ast     // if (    //   path.node.type === "Identifier" &&    //   path.node.name === "n"    // ) {    //   path.node.name = "x";    // }    if (t.isIdentifier(path.node, {name: "n"})) {      path.node.name = "x"    }    // 在程序的结尾 塞进去 我的 ast     if (t.isProgram(path.node)) {      console.log('塞入我写的 ast')      path.node.body.unshift(astImport)    }  },});// 对节点操作过当前的代码const targetCode = generate.default(ast).codeconsole.log('targetCode', targetCode)// 塞入我写的 ast// targetCode const a = require("a");// function square(x) {//   return x * x;// }

2. 开始撸 Babel 的插件

1. 开始撸插件代码之前必须要有一个不便调试的 babel 的环境

装置 babel 外围包 @babel/core （文档：https://www.babeljs.cn/docs/u...）。npm install --save-dev @babel/core
新建 demo 代码 index.js

// index.jslet bad = true;const square = n => n * n;

新建插件 plugin2.js

// plugin.jsmodule.exports = function({ types: babelTypes }) {    return {      name: "deadly-simple-plugin-example",      visitor: {        Identifier(path, state) {          if (path.node.name === 'bad') {            path.node.name = 'good';          }        }      }    };  };

新建 core-demo.js应用 babel-core 来编译代码

const babel = require("@babel/core");const path = require("path");const fs = require("fs");// 导入 index.js 的代码 并应用 插件 plugin2 转换babel.transformFileAsync('./index.js', {    plugins: [path.join(__dirname,'./plugin2.js')],}).then(res => {    console.log(res.code);    // 转换后的代码 写入 dist.js 文件    fs.writeFileSync(path.join(__dirname,'./dist.js'), res.code, {encoding: 'utf8'});})

测试断点是否失效（不便前期调试）

vscode中新建 debug终端

2. 应用 nodemon 包优化环境，进步调试的效率（nodemon + debug 提高效率）

装置依赖: npm i nodemon
配置package.json 的 script 命令为：（监听文件变更时候疏忽dist.js ，因为 dist的变更会引起脚本的从新执行，脚本的从新执行又产生新的 dist.js）

 "babylon": "nodemon core-demo.js --ignore dist.js"

开启debug 终端，运行 npm run babylon即可看到文件变更会主动走到断点里

3. 开始进行 babel 插件的实战

本文并未具体介绍所有的 babel path 节点的相干 api，具体的对于 path 节点的相干文档请见官网举荐文档（中文有点老旧）或者依据官网原版英文文档翻译的中文文档（曾经向官网提了PR 然而暂未合并），举荐的是先看此文档，发现其中局部 api 不相熟的时候再去查 api 文档，印象粗浅。

1. babel 插件的API标准

Babel 插件实质上是一个函数，该函数承受 babel 作为参数，通过会应用 babel参数里的 types函数

export default function(babel) {  // plugin contents}// or export default function({types}) {  // plugin contents}

返回的是一个对象。对象的 visitor属性是这个插件的次要访问者。visitor的每个函数中都会承受 2 个参数： path和 state

export default function({ types: t }) {  return {    visitor: {      // 此处的函数 名 是从 ast 里 取的      Identifier(path, state) {},      ASTNodeTypeHere(path, state) {}    }  };};

2. 来个 demo 实现 ast 层面的代码替换

目标： 将 foo === bar; 转为 replaceFoo !== myBar;

首先通过 https://astexplorer.net/ 来剖析 ast 构造。

{  type: "BinaryExpression",  operator: "===",  left: {    type: "Identifier",    name: "foo"  },  right: {    type: "Identifier",    name: "bar"  }}

从 BinaryExpression增加访问者进行 ast 节点解决，能够看到当 operator为 === 的时候须要进行解决。代码如下

// plugin.jsmodule.exports = function({types}) {    console.log('t')    return {      visitor: {        BinaryExpression(path, state) {            console.log('path1', path);            // 不是 !== 语法的 间接返回            if (path.node.operator !== '===') {                return;            }        },      }    };  };

进行 ast 节点的更改，因为 ast 是一个对象，能够对 path 字段间接更改其属性值即可。比方将 left 和 right 节点的name 进行批改。

// plugin.jsmodule.exports = function({types}) {    console.log('t')    return {      visitor: {        BinaryExpression(path, state) {            console.log('path1', path);            if (path.node.operator !== '===') {                return;            }            if (path.node.operator === '===') {                path.node.operator = '!=='            }            if (path.node.left.name === 'foo') {                path.node.left.name = 'replaceFoo'            }            if (path.node.right.name === 'bar') {                path.node.right.name = 'myBar';            }        },      }    };  };

从 index.js 通过上述 babel 插件解决当前得出 dist.js 内容为：

// index.jsfoo === bara = 123// babel 插件解决后replaceFoo !== myBar;a = 123;

3. 上一大节把握了ast 节点根底的批改和拜访，加深一下 ast 节点的操作

1. 获取 ast 节点的属性值：path.node.property

BinaryExpression(path) {  path.node.left;  path.node.right;  path.node.operator;}

2. 获取该属性外部的 path (节点信息)： path.get(xxx)

BinaryExpression(path) {  path.get('left'); // 返回的是一个 path 性的}Program(path) {  path.get('body.0');}

3. 查看节点的类型，通过babel 参数自带的 types 函数进行查看。

简略判断节点的类型

// plugin.jsmodule.exports = function({types: t}) {    console.log('t')    return {      visitor: {        BinaryExpression(path, state) {            console.log('path1', path.get('left'));            if (path.node.operator !== '===') {                return;            }            if (path.node.operator === '===') {                path.node.operator = '!=='            }              // 等同于 path.node.left.type === "Identifier"            if (t.isIdentifier(path.node.left)) {                path.node.left.name = 'replaceFoo'            }        },      }    };  };

判断节点的类型，外加浅层属性的校验

BinaryExpression(path) {  if (t.isIdentifier(path.node.left, { name: "n" })) {    // ...  }}

性能上等同于：

BinaryExpression(path) {  if (    path.node.left != null &&    path.node.left.type === "Identifier" &&    path.node.left.name === "n"  ) {    // ...  }}

4. 再来一道对于ast 操作节点的题小试本领（要害还是学会看ast 语法树和尝试一些ast 节点相干的api）

以后程序代码为：

function square(n) {    return n * n;}const a = 2;console.log(square(a));

指标程序代码是：

function newSquare(n, left) {  return left ** n;}const a = 2;console.log(newSquare(a, 222));

整体操作ast 语法树的剖析逻辑：（结尾会放残缺代码）

将 square函数命名进行更名，改为 newSquare
将 newSquare（因为 square参数节点的 ast 名称曾经改为了newSquare ）的入参减少一个 left参数
将 n * n 进行替换，换成 left ** n;
在调用 square处进行批改，首先将函数名改为 newSquare，而后在，对该函数的入参减少一个 222

1. 首先剖析原代码的 ast 语法树

能够看到以后程序代码被解析为 3 段ast 语法树节点

2. 接下来剖析函数定义的这个节点

鼠标滑选 1-3 行，发现右侧主动开展了。

3. 进行第一步：将 `square`函数命名进行更名，改为 `newSquare`

由图看出，如何确定以后的节点是 square 函数的命名节点呢？（1 分钟思考一下）。

节点的类型首先是：Identifier 类型，并且以后节点的 name 字段是 square
节点的父级节点的类型是 FunctionDeclaration 的。

伪代码如下：

    // 新建 变量，记录 新函数的函数名    const newName = 'newSquare';                    // 获取以后 函数的 父级。查找最靠近的父函数或程序：        const parentFunc = path.getFunctionParent();        if (parentFunc) {          // 以后父节点 是 square函数 并且以后的节点的key是 id（此处是为了确认 square 的函数命名节点）。          // 而后对此函数进行重命名 从 square 改为 newName          if (            parentFunc.node.id.name === "square" &&            path.key === "id"          ) {            console.log("对 square 进行重命名：", newName);            path.node.name = newName;          }        }

4. 接下来将 `newSquare`的入参减少一个 `left`参数。

以后节点的类型是 Identifier类型，并且是在名为 params的列表里 (列表，就意味着能够进行增删改查了)
以后节点的父级节点类型是 FunctionDeclaration 的，并且父级节点下的 id 的 name 属性曾经变更为了 newSquare

伪代码如下：

          // 以后父节点 是 square函数 并且以后的节点的listKey是 params（此处是为了排除 square 的函数命名节点）。          // 此处是在重命名后才会走的 逻辑 所以 该节点 父级的 名称判断用的是 newName 而不是 square          if (            parentFunc.type === "FunctionDeclaration" &&            parentFunc.node.id.name === newName &&            path.listKey === "params"          ) {            console.log("新增函数参数 left");            path.container.push(t.identifier("left"));          }

5. 将 `n * n` 进行替换，换成 `left ** n;`

发现如果单纯的去操作 Identifier类型的 n 状况有些多，并且当前情况还要判断操作符（operator）是不是 *,换个思路，去操作 BinaryExpression 类型的数据

在 BinaryExpression类型中，仅仅须要判断以后 operator的属性是不是咱们须要的 *

伪代码如下：

      BinaryExpression(path, state) {        if (path.node.operator !== "*") return;        console.log("BinaryExpression");        // 替换一个节点        path.replaceWith(          // t.binaryExpression("**", path.node.left, t.NumericLiteral(2))          t.binaryExpression("**", t.identifier("left"), t.identifier("n"))        );      },

6. 最初一步：在调用 `square`处进行批改，首先将函数名改为 `newSquare`，而后在，对该函数的入参减少一个 `222`

指标是将 name 字段的 square 字段改为 newSquare。

办法一：其父级节点是一个 CallExpression，间接在其父级节点操作它。

伪代码如下：

      CallExpression(path, state) {        console.log("CallExpression");        // 以后被调用函数的 名称 是 square        if (path.node.callee.name === 'square') {          console.log("在 CallExpression 中，更改 被调用 函数 square 的名字 为", newName);          path.node.callee.name  = newName;        }      },

办法二：通过节点 Identifier 进行操作

判断以后节点的属性是 callee 示意是被调用的，并且以后节点的名字为 square

伪代码如下：

        // 判断是不是 square 的函数调用        if (path.key === 'callee' && path.isIdentifier({name: 'square'})) {          console.log("对square函数调用进行重命名", newName);          path.node.name = newName;        }

7. 总结以及全副代码

到当初，你会发现其实对ast 语法树的操作，次要还是操作一个 ast 语法树的对象，只有对 ast 语法树对象进行合乎 ast 语法树相干规定的属性的更改，babel 就会主动解决 ast 语法树对象并生成新的代码。

残缺代码地址

外围代码

// square-plugin.js// 新建 变量，记录 新函数的函数名const newName = 'newSquare';module.exports = function ({ types: t }) {  return {    visitor: {      Identifier(path, state) {        console.log("走进 Identifier");        if (path.parentPath && path.listKey === 'arguments') {          console.log("减少参数");          path.container.push(t.NumericLiteral(222));          return;        }        // 获取以后 函数的 父级。查找最靠近的父函数或程序：        const parentFunc = path.getFunctionParent();        if (parentFunc) {          // 以后父节点 是 square函数 并且以后的节点的listKey是 params（此处是为了排除 square 的函数命名节点）。          // 此处是在重命名后才会走的 逻辑 所以 该节点 父级的 名称判断用的是 newName 而不是 square          if (            parentFunc.type === "FunctionDeclaration" &&            parentFunc.node.id.name === newName &&            path.listKey === "params"          ) {            console.log("新增函数参数 left");            path.container.push(t.identifier("left"));          }          // 以后父节点 是 square函数 并且以后的节点的key是 id（此处是为了确认 square 的函数命名节点）。          // 而后对此函数进行重命名 从 square 改为 newName          if (            parentFunc.node.id.name === "square" &&            path.key === "id"          ) {            console.log("对 square 进行重命名：", newName);            path.node.name = newName;          }        }        // 办法二： 判断是不是 square 的函数调用        // if (path.key === 'callee' && path.isIdentifier({name: 'square'})) {        //   console.log("对square函数调用进行重命名", newName);        //   path.node.name = newName;        // }      },      BinaryExpression(path, state) {        if (path.node.operator !== "*") return;        console.log("BinaryExpression");        // 替换一个节点        path.replaceWith(          // t.binaryExpression("**", path.node.left, t.NumericLiteral(2))          t.binaryExpression("**", t.identifier("left"), t.identifier("n"))        );      },      CallExpression(path, state) {        console.log("CallExpression");        // 办法1： 以后被调用函数的 名称 是 square        if (path.node.callee.name === 'square') {          console.log("在 CallExpression 中，更改 被调用 函数 square 的名字 为", newName);          path.node.callee.name  = newName;        }      },      FunctionDeclaration(path, state) {        console.log("FunctionDeclaration");        // const params = path.get('params');        // const params = path.get('params');        // params.push(t.identifier('left'));        // console.log('FunctionDeclaration end', path);        // path.params = params;        // path.params.push(t.identifier('right'));      },    },  };};

本文由mdnice多平台公布

学习的背景 （为啥 要写 一个 Babel 插件呢？）

1. babel 罕用包的介绍 （写插件必备常识）

1. Babylon 是Babel 的解析器，代码转为AST 语法树

2. Babel-traverse 来操作 AST 语法树

3. babel-generator依据批改的语法树 生成代码 和源码映射（source map）

4. 发现对节点的判断 须要写的代码很多，抽离出公共的包来进行节点的判断。babel-types（AST节点里的 Lodash 式工具库）

5. 通过AST 来生成CODE 可读性 太差。应用babel-template来实现占位符的来生成代码。

2. 开始 撸 Babel 的插件

1. 开始撸插件代码 之前 必须要有一个 不便调试的 babel 的环境

2. 应用 nodemon 包优化环境，进步调试的效率 （nodemon + debug 提高效率）

3. 开始进行 babel 插件的实战

1. babel 插件的API标准

2. 来个 demo 实现 ast 层面的 代码替换

3. 上一大节 把握了ast 节点 根底的 批改 和 拜访，加深一下 ast 节点的操作

1. 获取 ast 节点的 属性值：path.node.property

2. 获取 该属性 外部的 path (节点信息)： path.get(xxx)

3. 查看节点的类型， 通过babel 参数自带的 types 函数进行查看。

4. 再来一道对于ast 操作节点的题小试本领（要害还是学会看ast 语法树和 尝试一些ast 节点相干的api）

1. 首先剖析 原代码的 ast 语法树

2. 接下来剖析 函数定义 的这个节点

3. 进行第一步：将 square函数命名 进行 更名，改为 newSquare

4. 接下来 将 newSquare的入参减少 一个 left参数。

5. 将 n * n 进行 替换，换成 left ** n;

6. 最初一步：在调用 square处 进行批改，首先将函数名 改为 newSquare，而后在，对该函数的入参减少 一个 222

7. 总结 以及 全副代码

学习的背景（为啥要写一个 Babel 插件呢？）

1. babel 罕用包的介绍（写插件必备常识）

3. `babel-generator`依据批改的语法树生成代码和源码映射（source map）

4. 发现对节点的判断须要写的代码很多，抽离出公共的包来进行节点的判断。`babel-types`（AST节点里的 Lodash 式工具库）

5. 通过AST 来生成CODE 可读性太差。应用`babel-template`来实现占位符的来生成代码。

2. 开始撸 Babel 的插件

1. 开始撸插件代码之前必须要有一个不便调试的 babel 的环境

2. 应用 nodemon 包优化环境，进步调试的效率（nodemon + debug 提高效率）

2. 来个 demo 实现 ast 层面的代码替换

3. 上一大节把握了ast 节点根底的批改和拜访，加深一下 ast 节点的操作

1. 获取 ast 节点的属性值：path.node.property

2. 获取该属性外部的 path (节点信息)： path.get(xxx)

3. 查看节点的类型，通过babel 参数自带的 types 函数进行查看。

4. 再来一道对于ast 操作节点的题小试本领（要害还是学会看ast 语法树和尝试一些ast 节点相干的api）

1. 首先剖析原代码的 ast 语法树

2. 接下来剖析函数定义的这个节点

3. 进行第一步：将 `square`函数命名进行更名，改为 `newSquare`

4. 接下来将 `newSquare`的入参减少一个 `left`参数。

5. 将 `n * n` 进行替换，换成 `left ** n;`

6. 最初一步：在调用 `square`处进行批改，首先将函数名改为 `newSquare`，而后在，对该函数的入参减少一个 `222`

7. 总结以及全副代码