【入门级】开发去除 log 的 Babel 插件

341 阅读1分钟

在学会一些基础的概念之后,就可以通过一些简单的实践去完善我们学会的知识,加深印象。

所以这一节的话,用市面上比较通用的一个 babel 教程说明 -- 开发去除项目中 console.log。大家都知道通常我们本地开发的时候,会使用 console.log 去打印相关的流程信息,便于我们调试以及排查解决问题。但是线上环境是不需要打印的,因为如果在线上环境打印日志记录的话,会暴露一些隐藏的信息,一方面不专业,另一方面不安全。

1. 创建项目目录

mkdir babel-console-clear && babel-console-clear

image.png

2. 初始化项目目录

2.1 初始化 node 应用

npm init

image.png

2.2 初始化 babel 配置文件

在根目录下面创建 .babelrc 文件,文件内容如下:

{
  
}

image.png

2.3 编写 clear 代码

在项目中安装 babel-clinpm i babel-cli。改装一下 package.json 文件。

{
  "name": "babel-console-clear",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "babel index.js"
  },
  "author": "shuangyue <18795905365@163.com>",
  "license": "MIT",
  "dependencies": {
    "babel-cli": "^6.26.0"
  }
}

这时候执行 npm run test,出现下图所示,console.log 被打印了出来。

image.png

首先,我们查看 console.log 转化成 AST 后是什么样子, AST 生成网站

image.png

然后根据 AST 文件格式,编写 clear/index.js 文件代码:

module.exports = function () {
  return {
    visitor: {
      ExpressionStatement (path, { opts }) {
        const { object, property } = path.node.expression.callee;
        if (object.name === "console") {
          const isIgnore = (opts.ignore || []).find(ele => ele === property.name);
          if (!isIgnore) path.remove();
        }
      }
    }
  }
}

.babelrc 文件引入刚才编写的插件

{
  "plugins": [
    [
      "./src/clear"
    ]
  ]
}

再次执行,效果如下:

image.png