babel插件去除console示例详解

更新时间：2022年10月19日 15:07:35 作者：安稳

这篇文章主要为大家介绍了babel插件去除console示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

起因

已经颓废了很久因为实在不知道写啥了突然我某个同事对我说宝哥你看这个页面好多console.log 不仅会影响性能而且可能会被不法分子所利用我觉得很有道理所以我萌生了写一个小插件来去除生产环境的console.log的想法

介绍

我们笼统的介绍下babel，之前我有一篇写精度插件的babel文章，babel一共有三个阶段：第一阶段是将源代码转化为ast语法树、第二阶段是对ast语法树进行修改，生成我们想要的语法树、第三阶段是将ast语法树解析，生成对应的目标代码。

窥探

我们的目的是去除console.log，我们首先需要通过ast查看语法树的结构。我们以下面的console为例：

注意因为我们要写babel插件所以我们选择@babel/parser库生成ast，因为babel内部是使用这个库生成ast的

console.log("我会被清除");

初见AST

AST是对源码的抽象，字面量、标识符、表达式、语句、模块语法、class语法都有各自的AST。

我们这里只说下本文章中所使用的AST。

Program

program 是代表整个程序的节点，它有 body 属性代表程序体，存放 statement 数组，就是具体执行的语句的集合。

可以看到我们这里的body只有一个ExpressionStatement语句，即console.log。

ExpressionStatement

statement 是语句，它是可以独立执行的单位，expression是表达式，它俩唯一的区别是表达式执行完以后有返回值。所以ExpressionStatement表示这个表达式是被当作语句执行的。

ExpressionStatement类型的AST有一个expression属性，代表当前的表达式。

CallExpression

expression 是表达式，CallExpression表示调用表达式，console.log就是一个调用表达式。

CallExpression类型的AST有一个callee属性，指向被调用的函数。这里console.log就是callee的值。

CallExpression类型的AST有一个arguments属性，指向参数。这里“我会被清除”就是arguments的值。

MemberExpression

Member Expression通常是用于访问对象成员的。他有几种形式：

a.b
a["b"]
new.target
super.b

我们这里的console.log就是访问对象成员log。

为什么MemberExpression外层有一个CallExpression呢？

实际上，我们可以理解为，MemberExpression中的某一子结构具有函数调用，那么整个表达式就成为了一个Call Expression。

MemberExpression有一个属性object表示被访问的对象。这里console就是object的值。

MemberExpression有一个属性property表示对象的属性。这里log就是property的值。

MemberExpression有一个属性computed表示访问对象是何种方式。computed为true表示[],false表示. 。

Identifier

Identifer 是标识符的意思，变量名、属性名、参数名等各种声明和引用的名字，都是Identifer。

我们这里的console就是一个identifier。

Identifier有一个属性name 表示标识符的名字

StringLiteral

表示字符串字面量。

我们这里的log就是一个字符串字面量

StringLiteral有一个属性value 表示字符串的值

公共属性

每种 AST 都有自己的属性，但是它们也有一些公共的属性：

type：AST节点的类型
start、end、loc：start和end代表该节点在源码中的开始和结束下标。而loc属性是一个对象，有line和column属性分别记录开始和结束的行列号
leadingComments、innerComments、trailingComments：表示开始的注释、中间的注释、结尾的注释，每个 AST 节点中都可能存在注释，而且可能在开始、中间、结束这三种位置，想拿到某个 AST 的注释就通过这三个属性。

如何写一个babel插件？

babel插件是作用在第二阶段即transform阶段。

transform阶段有@babel/traverse，可以遍历AST，并调用visitor函数修改AST。

我们可以新建一个js文件，其中导出一个方法，返回一个对象，对象存在一个visitor属性，里面可以编写我们具体需要修改AST的逻辑。

+ export default () => {
+  return {
+    name: "@parrotjs/babel-plugin-console",
+    visitor,
+  };
+ };

构造visitor方法

path 是记录遍历路径的 api，它记录了父子节点的引用，还有很多增删改查 AST 的 api

+ const visitor = { 
+   CallExpression(path, { opts }) {
+    //当traverse遍历到类型为CallExpression的AST时，会进入函数内部，我们需要在函数内部修改
+  }
+ };

我们需要遍历所有调用函数表达式所以使用CallExpression。

去除所有console

我们将所有的console.log去掉

path.get 表示获取某个属性的path

path.matchesPattern 检查某个节点是否符合某种模式

path.remove 删除当前节点

CallExpression(path, { opts }) {
+  //获取callee的path
+  const calleePath = path.get("callee"); 
+  //检查callee中是否符合“console”这种模式
+  if (calleePath && calleePath.matchesPattern("console", true)) {
+       //如果符合 直接删除节点  
+       path.remove();
+  }
},

增加env api

一般去除console.log都是在生产环境执行所以增加env参数

AST的第二个参数opt中有插件传入的配置

+  const isProduction = process.env.NODE_ENV === "production";
CallExpression(path, { opts }) {
....
+  const { env } = opts;
+  if (env === "production" || isProduction) {
       path.remove();
+  }
....
},

增加exclude api

我们上面去除了所有的console，不管是error、warning、table都会清除，所以我们加一个exclude api，传一个数组，可以去除想要去除的console类型

....
+ const isArray = (arg) => Object.prototype.toString.call(arg) === "[object Array]";
- const { env } = opts;
+ const { env,exclude } = opts;
if (env === "production" || isProduction) {
- path.remove();  
+ //封装函数进行操作
+ removeConsoleExpression(path, calleePath, exclude);
}
+const removeConsoleExpression=(path, calleePath, exclude)=>{
+  if (isArray(exclude)) { 
+    const hasTarget = exclude.some((type) => {
+      return calleePath.matchesPattern("console." + type);
+    });
+    //匹配上直接返回不进行操作
+    if (hasTarget) return;
+  }
+  path.remove();
+}

增加commentWords api

某些时候我们希望一些console 不被删除我们可以给他添加一些注释比如

//no remove
console.log("测试1");
console.log("测试2");//reserse
//hhhhh
console.log("测试3")

如上我们希望带有no remove前缀注释的console 和带有reserse后缀注释的console保留不被删除

之前我们提到 babel给我们提供了leadingComments（前缀注释）和trailingComments（后缀注释）我们可以利用他们由AST可知她和CallExpression同级，所以我们需要获取他的父节点然后获取父节点的属性

path.parentPath 获取父path

path.node 获取当前节点

- const { exclude, env } = opts;
+ const { exclude, commentWords, env } = opts;
+ const isFunction = (arg) =>Object.prototype.toString.call(arg) === "[object Function]";
+ // 判断是否有前缀注释 
+ const hasLeadingComments = (node) => {
+  const leadingComments = node.leadingComments;
+  return leadingComments && leadingComments.length;
+ };
+ // 判断是否有后缀注释 
+ const hasTrailingComments = (node) => {
+  const trailingComments = node.trailingComments;
+  return trailingComments && trailingComments.length;
+ };
+ //判断是否有关键字匹配 默认no remove || reserve 且如果commentWords和默认值是相斥的
+ const isReserveComment = (node, commentWords) => {
+ if (isFunction(commentWords)) {
+   return commentWords(node.value);
+ }
+ return (
+    ["CommentBlock", "CommentLine"].includes(node.type) &&
+    (isArray(commentWords)
+      ? commentWords.includes(node.value)
+      : /(no[t]? remove\b)|(reserve\b)/.test(node.value))
+  );
+};
- const removeConsoleExpression = (path, calleePath, exclude) => {
+ const removeConsoleExpression = (path, calleePath, exclude,commentWords) => {
+ //获取父path
+ const parentPath = path.parentPath;
+ const parentNode = parentPath.node;
+ //标识是否有前缀注释
+ let leadingReserve = false;
+ //标识是否有后缀注释
+ let trailReserve = false;
+ if (hasLeadingComments(parentNode)) {
+    //traverse 
+    parentNode.leadingComments.forEach((comment) => {
+      if (isReserveComment(comment, commentWords)) {
+        leadingReserve = true;
+      }
+    });
+  }
+ if (hasTrailingComments(parentNode)) {
    //traverse 
+   parentNode.trailingComments.forEach((comment) => {
+     if (isReserveComment(comment, commentWords)) {
+       trailReserve = true;
+     }
+   });
+ } 
+ //如果没有前缀节点和后缀节点 直接删除节点
+ if (!leadingReserve && !trailReserve) {
+    path.remove();
+  }
}

细节完善

我们大致完成了插件我们引进项目里面进行测试

console.log("测试1");
//no remove
console.log("测试2"); 
console.log("测试3");//reserve
console.log("测试4");
//新建.babelrc 引入插件
{
    "plugins":[["../dist/index.cjs",{
        "env":"production"
    }]]
}

理论上应该移除测试1、测试4，但是我们惊讶的发现竟然一个console没有删除！！经过排查我们大致确定了问题所在

因为测试2的前缀注释同时也被AST纳入了测试1的后缀注释中了，而测试3的后缀注释同时也被AST纳入了测试4的前缀注释中了

所以测试1存在后缀注释测试4存在前缀注释所以测试1和测试4没有被删除

那么我们怎么判断呢？

对于后缀注释

我们可以判断后缀注释是否与当前的调用表达式处于同一行，如果不是同一行，则不将其归纳为后缀注释

 if (hasTrailingComments(parentNode)) {
+    const { start:{ line: currentLine } }=parentNode.loc;
    //traverse
    // @ts-ignore
    parentNode.trailingComments.forEach((comment) => { 
+      const { start:{ line: currentCommentLine } }=comment.loc;
+      if(currentLine===currentCommentLine){
+        comment.belongCurrentLine=true;
+      }
+     //属于当前行才将其设置为后缀注释
-      if (isReserveComment(comment, commentWords))
+      if (isReserveComment(comment, commentWords) && comment.belongCurrentLine) {
        trailReserve = true;
      }
    });
  }

我们修改完进行测试发现测试1 已经被删除

对于前缀注释

那么对于前缀注释我们应该怎么做呢因为我们在后缀注释的节点中添加了一个变量belongCurrentLine，表示该注释是否是和节点属于同一行。

那么对于前缀注释，我们只需要判断是否存在belongCurrentLine，如果存在belongCurrentLine，表示不能将其当作前缀注释。

 if (hasTrailingComments(parentNode)) {
+    const { start:{ line: currentLine } }=parentNode.loc;
    //traverse
    // @ts-ignore
    parentNode.trailingComments.forEach((comment) => { 
+      const { start:{ line: currentCommentLine } }=comment.loc;
+      if(currentLine===currentCommentLine){
+        comment.belongCurrentLine=true;
+      }
+     //属于当前行才将其设置为后缀注释
-      if (isReserveComment(comment, commentWords))
+      if (isReserveComment(comment, commentWords) && comment.belongCurrentLine) {
        trailReserve = true;
      }
    });
  }

发布到线上

我现已将代码发布到线上

安装

yarn add @parrotjs/babel-plugin-console

使用

举个例子：新建.babelrc

{
    "plugins":[["../dist/index.cjs",{
        "env":"production"
    }]]
}

git地址

以上就是babel插件去除console示例详解的详细内容，更多关于babel插件去除console的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

fabric.js实现diy明信片功能
这篇文章主要为大家详细介绍了fabric.js实现diy明信片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-03-03
D3.js实现散点图和气泡图的方法详解
这篇文章将会给大家介绍了另外两种可视化图表，利用D3.js实现散点图和气泡图，文章通过多个方面介绍的非常详细，下面来一起看看吧。
2016-09-09
C#程序员入门学习微信小程序的笔记
这篇文章主要给大家分享了一位C#程序员入门学习微信小程序的笔记，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-03-03
微信小程序实现点击图片旋转180度并且弹出下拉列表
这篇文章主要为大家详细介绍了微信小程序实现点击图片旋转180度并且弹出下拉列表，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-11-11
微信小程序外卖选购页实现切换分类与数量加减功能案例
这篇文章主要介绍了微信小程序外卖选购页实现切换分类与数量加减功能,结合具体实例形式分析了微信小程序状态记录、判定及数值运算相关操作技巧,需要的朋友可以参考下
2019-01-01
利用原生js和jQuery实现单选框的勾选和取消操作的方法
下面小编就为大家带来一篇利用原生js和jQuery实现单选框的勾选和取消操作的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-09-09
公众号SVG动画交互实战代码
这篇文章主要介绍了公众号SVG动画交互实战代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
利用Echarts如何实现多段圆环图
这篇文章主要给大家介绍了关于利用Echarts如何实现多段圆环图的相关资料,文中通过实例代码代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-03-03
javascript中获取class的简单实现
下面小编就为大家带来一篇javascript中获取class的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-07-07
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
这篇文章主要介绍了JavaScript作用域、闭包、对象与原型链,结合实例形式总结分析了javascript中变量与函数的作用域、闭包、对象、原形链相关概念、用法及注意事项,需要的朋友可以参考下
2018-08-08