babel插件之去掉debugger和console

需求

每次部署代码之前，都会将debugger和console.log一起提交上去，如果手动注释，又太麻烦，所以需要一个babel插件，能够在打包的时候，将这部分的代码去除掉

解决

首先安装依赖

1
2
3
yarn add @babel/parser
yarn add @babel/traverse
yarn add @babel/core

index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// babel插件的使用
const babel = require("@babel/core");

const noDebuggerPlugin = require('./nodebugging');

// 字符串源码
const body = `
  console.log(123);
  console.error(456);
  const abc = 5;
  debugger;
  alert(123);
  const efg = 123
`
// 使用插件
const result = babel.transform(body, {
  plugins: [
    noDebuggerPlugin
  ]
})

console.log(result.code);

nodebugging.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
const chainGet = require('chain-get');
const defualtOpts = {
  debugger: true,
  console: true
}


const visitor = {
  DebuggerStatement(path, state) {
    if (state) {
      if (typeof state.opts === 'undefined') {
        state.opts = defualtOpts;
      }
      if (typeof state.opts.debugger === 'undefined') {
        state.opts.debugger = true;
      }
      if (state.opts.debugger) {
        path.remove();
      }
    }
  },
  ExpressionStatement(path, state) {
    if (state) {
      if (typeof state.opts === 'undefined') {
        state.opts = defualtOpts;
      }
    }
    if (chainGet(path).node.expression.type() === 'CallExpression' && chainGet(path).node.expression.callee()) {
      // remove alert
      if (path.node.expression.callee.name === 'alert') {
        if (state.opts.alert) {
          path.remove()
        }
        return;
      }

      // remove console
      if (path.node.expression.callee.type === 'MemberExpression' && chainGet(path).node.expression.callee.object.name() === 'console') {
        if (state && state.opts) {
          if (typeof state.opts.console === 'undefined') {
            state.opts.console = true;
          }
        }
        if (chainGet(state).opts.console()) {
          path.remove();
        }
        return;
      }

      // remove customized debugger function
      if (typeof chainGet(state).opts.debugFn() === 'string') {
        const fn = state.opts.debugFn;
        if (chainGet(path).node.expression.callee.name() === fn) {
          path.remove();
        }
      }
    }
  },
  FunctionDeclaration(path, state) {
    if (!state || typeof state.opts === 'undefined' || !state.opts.debugFn || typeof state.opts.debugFn !== 'string') return;
    if (chainGet(path).node.id.type() === 'Identifier' && path.node.id.name === state.opts.debugFn) {
      path.remove();
    }
  },
  VariableDeclarator(path, state) {
    if (!state || typeof state.opts === 'undefined' || !state.opts.debugFn || typeof state.opts.debugFn !== 'string') return;
    const fn = state.opts.debugFn;
    if (chainGet(path).node.id.name() === fn) {
      if (path.inList) {
        path.remove();
      } else {
        const parentPath = path.parentPath;
        parentPath.remove();
      }
    }
  }
}


module.exports = function () {
  return {
    visitor
  }
}

执行

1
node index.js

打印出来出来的结果里已经没有了debugger和console

1
2
3
const abc = 5;
alert(123);
const efg = 123;

参考文档

Babel插件

#babel插件
babel插件之去掉debugger和console
https://thaneyang.github.io/2021/06/babel插件之去掉debugger和console.html
作者
ThaneYang
发布于
2021年6月8日
许可协议