27.Babel插件—删除调试和注释代码

Babel插件工作机制主要是通过visitor访问者设计模式来实现的，我们对代码的更改都是基于Babel->AST在这个过程中对AST的修改来实现的。

AST(抽象语法树)的概念我这边就不多做过多的介绍了，戳我看AST

可以通过在线工具查看我们写的代码生成后的在线AST转换工具

第一步：初始化目录

本地新建testbabel目录，执行npm init -y初始化package.json

第二步：安装插件

npm install @babel/core @babel/traverse @babel/types --save-dev

第三步：创建code.js文件和index.js文件

我的目录结构：

• plugins:放插件的目录

• code.js：测试代码目录

• index.js入口文件

  
  
  image-20211228222125049.png

//index.js
const { transformSync } = require("@babel/core");
const traverse = require("@babel/traverse").default;
const path = require("path");
// console.log(path.join(__dirname));

//code.js里面内容照搬过来的，也可以不用写code.js直接在index中声明code
let code = `
let a = 1;
debugger;
//这些代码可以删除
function hello(v) {
  console.log("hello " + v + " !");
  return "hello" + v;
}
let hell = hello("piao.huang");
`;

//babel-config
const babelConfig = {
  plugins: ["./plugins/babel-plugin-myPlugin"],
};
const ast = transformSync(code, babelConfig);
//打印出使用插件转换完的代码
console.log(ast.code);

删除注释代码：这些对应得就是相应得注释节点。首先我一开始一直以为是在comment对象中进行从操作得。直到看到了这篇大佬的这篇文章传送门

image.png

删除console的内容：下面这些就是生成的console的内容，console.log先是被认为是一个表达式语句，然后使用@babel/types里面的方法types.isMemberExpression判断是不是MemberExpression并且当前函数中有一个对象，它的名字叫console的，它有一个属性叫Log的，对这个节点进行删除。

image.png

debugger对应的语法树的解析，被认为是一个DebuggerStatement声明语句，直接移除就好。

image.png

//babel-plugin-myPlugin.js
const fs = require("fs");
const types = require("@babel/types");
module.exports = () => {
  return {
    visitor: {
      //通过visitor设计模式来实现的
      //访问标识符遍历树，本质是修改ast树
      CallExpression(path) {
        // fs.writeFileSync("context.json", JSON.stringify(context));
        const { callee } = path.node;
        const isConsoleLog =
          types.isMemberExpression(callee) &&
          callee.object.name === "console" &&
          callee.property.name === "log";
        if (isConsoleLog) {
          path.remove();
        }
      },
      //表达式
      MemberExpression(path, state) {},

      Statement(path) {
        const type = path.node.type;

        //直接删除的是一个声明语句
        if (type === "DebuggerStatement") {
          path.remove();
        }
      },
      //函数声明
      FunctionDeclaration(path) {
    
        types.removeComments(path.node);
       
      },
    },
  };
};

执行结果：

image.png

执行node index.js看控制台的打印结果会发现debugger以及console以及注释的代码全部会被清掉了。
借此我们可以实现例如格式化打印内容，对代码进行流程分析，以此来删除无用代码等，其实uglifyjs这些插件就是利用ast的特性来实现对代码的压缩的。

ENDING：踩过的坑

• 不能使用node的代码执行工具来执行，因为这样就不会去自动引用其他的引入模块
• 没有进行es6兼容不能使用import和export语法来进行引入模块，node默认使用commonjs规范来引入模块
• 调试比较麻烦，可以借助于node的fs模块进行输出打印出来的Node节点会比较好看一点
• 对文档的不熟悉使得我们没有相应的思维去考虑大概用什么方法去操作，这个归结起来还是要多写。

也可以直接拉我git上的源码，git地址

一份非常全的Babel插件手册中文文档