编写一个Babel插件

搭建一个rollup

新建一个 babel-plugin-decimal文件夹用来开发Babel插件

标准规范babel-plugin-xxxxx 开头

npm init

npm i rollup @rollup/plugin-babel

npm i decimal.js -S

{
  "name": "babel-plugin-decimal",
  "version": "1.0.1",
  "description": "",
  "main": "lib/index.js",
  "type": "module",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rollup -c"
  },
  "author": "",
  "license": "ISC",
  "files": [
    "lib/*",
    "src/*"
  ],
  "devDependencies": {
    "@babel/preset-env": "^7.22.10",
    "@rollup/plugin-babel": "^6.0.3",
    "@babel/core": "^7.22.10",
    "rollup": "^3.28.0"
  },
  "peerDependencies": {
    "@babel/core": "^7.22.8",
    "@babel/preset-env": "^7.22.7"
  },
  "dependencies": {
    "decimal.js": "^10.4.3"
  }
}

然后在根目录下新建 rollup.config.js 文件，用来配置 rollup 打包

import babel from '@rollup/plugin-babel';


export default {
  input: 'src/index.js',
  output: {
    // name: 'decimal',
    file: 'lib/index.js',
    format: 'cjs'
  },
  plugins: [
    babel({
      babelHelpers: 'bundled',
      presets: [['@babel/preset-env', {
        "targets": {
          "edge": '17',
          "firefox": '60',
          "chrome": '67',
          "safari": '11.1'
        }
      }]]
    })
  ]
}

创建src文件夹新建index.js文件

什么是抽象语法树（AST）？

我们可以借助一个网站，来一睹抽象语法树的真容~ https://astexplorer.net/

image.png

每一个代码片段都有属于自己的节点类型
代码最外层的节点类型为 Program
像 0.1+0.2 这种表达式，节点类型为 BinaryExpression
BinaryExpression节点里会有几个重要的东西
- operaor：运算符号
- left：左边的数字
- right: 右边的数字

其实抽象语法树的节点类型有很多：

标识符（Identifier）：表示变量、函数名等标识符的节点
字面量（Literal）：表示字面量值，如字符串、数字、布尔值等
表达式语句（ExpressionStatement）：表示包含表达式的语句节点
赋值表达式（AssignmentExpression）：表示赋值操作的表达式节点，如 x = 5
二元表达式（BinaryExpression）：表示包含二元操作符的表达式节点，如 x + y
一元表达式（UnaryExpression）：表示包含一元操作符的表达式节点，如 -x
函数声明（FunctionDeclaration）：表示函数声明的节点，包括函数名、参数和函数体
变量声明（VariableDeclaration）：表示变量声明的节点，包含变量名和可选的初始值
条件语句（IfStatement）：表示 If 条件语句的节点，包括条件表达式、if 分支和可选的 else 分支
循环语句（WhileStatement、ForStatement）：表示循环语句的节点，分别代表 While 循环和 For 循环
对象字面量（ObjectLiteral）：表示对象字面量的节点，包含对象属性和属性值
数组字面量（ArrayLiteral）：表示数组字面量的节点，包含数组元素
函数调用（CallExpression）：表示函数调用的节点，包含调用的函数名和参数列表
返回语句（ReturnStatement）：表示返回语句的节点，包含返回的表达式

其实，我们平时在 webpack 开发时会接触到一系列的插件，他们的功能比如有

去除console.log
压缩代码
去除注释

其实他们的原理整体上都是一致的，分为三步：

第一步代码转换成抽象语法树
第二步使用Babel为我们提供的方法,对语法树进行增删改查
第三步将处理后的语法树重新转换成代码

但是第一步和第三步我们不需要管，我们只需要完成第二步中的增删改查操作即可

注意点：在第二步中，babel 会对抽象语法树进行深度遍历，遍历到目标节点后，又会重新回到上层节点去重新遍历下一个目标节点，所以一个节点会被遍历两次，一来一回进去是 enter 回去是 exit

image.png

插件基本代码结构

export default function ({ template, types: t }) {

  return {
    visitor: {
      Program: {
        exit: function (path) {
        }
      },
      BinaryExpression: {
        exit: function (path) {
        }
      }
    }
  }
}

开发一个 babel 插件，文件必须默认返回一个函数，接收一个对象参数，里面有个属性我们需要用到

template：是@babel/template的一个方法，他能使用模板的方式生成AST节点
vistor: 你可以理解为修改AST节点的入口
Program、BinaryExpression：你需要修改的AST节点类型
exit 就是刚刚说的一来一回中的，回
path 就是被遍历到的AST节点对象

插件完全实现

const DECIMAL = 'Decimal';

const OPERATIONS_MAP = {
  '+': 'add',
  '-': 'sub',
  '*': 'mul',
  '/': 'div',
}

const OPERATIONS_KEY = Object.keys(OPERATIONS_MAP)


export default function ({template: template}) {
  const requireDecimal = template(`const ${DECIMAL}=require('decimal.js')`);
  //  babel-template：可以通过字符串的形式生成一个ast
  // 将运算表达式转换为decimal函数的节点模板
  const temp = template(`new ${DECIMAL}(LEFT).OPERATION(RIGHT).toNumber()`)
  return {
    visitor: {
      Program: {
        exit: function (path) {
          // 调用方法，往子节点body
          // 中插入 const Decimal = require('decimal.js')
          path.unshiftContainer('body', requireDecimal())
        }
      },
      BinaryExpression: {
        exit: function (path) {
          const operator = path.node.operator;
          if (OPERATIONS_KEY.includes(operator)) {
            // 调用方法替换节点
            path.replaceWith(
             // 传入 operator left right
              temp({
                LEFT: path.node.left,
                RIGHT: path.node.right,
                OPERATION: OPERATIONS_MAP[operator]
              })
            )
          }
        }
      }
    }
  }
}

打包发布NPM

当开发完成后，我们先 npm run build进行打包

然后运行 npm publish 发布到 NPM 上

项目使用

首先安装 babel-plugin-decimal

npm i babel-plugin-decimal

只需要在项目中的 .babelrc 或者 babel.config.js 中加入 babel-plugin-decimal即可

{
 "presets": ["@babel/preset-env"],
  "plugins": ["babel-plugin-sx-accuracy"]
}

测试

1692693665689.jpg