1

babel.config.js

-
-const proPlugins = ['dynamic-import-node'];
+const clearArrow = require('./tools/babel-clearArrow.js');
+const proPlugins = ['dynamic-import-node', [clearArrow]];
 if (process.env.NODE_ENV === 'production') {
     proPlugins.push('transform-remove-console');
+     proPlugins.push('transform-remove-debugger');
 }
 module.exports = {
   presets: [
@@ -13,6 +14,9 @@ module.exports = {
       // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
       // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
       'plugins': proPlugins
+    },
+    'production':{
+      'plugins': proPlugins
     }
   }
 }

package.json

@@ -72,6 +72,7 @@
     "babel-eslint": "10.1.0",
     "babel-plugin-dynamic-import-node": "2.3.3",
     "babel-plugin-transform-remove-console": "^6.9.4",
+    "babel-plugin-transform-remove-debugger": "^6.9.4",
     "chalk": "4.1.0",
     "compression-webpack-plugin": "5.0.2",
     "connect": "3.6.6",

tools/babel-clearArrow.js

+module.exports = function (babel) {
+  /* 遍历AST时匹配visitor对象，遍历到FunctionDeclaration的节点会执行该回调*/
+  /* https://babeljs.io/docs/en/babel-types查看全部节点信息*/
+  const visitor = {
+   ArrowFunctionExpression(nodePath) {
+             /* 匹配到箭头函数时执行 */
+             /* 每一个方法都存在一个nodePath参数，所谓的nodePath参数你可以将它理解成为一个节点路径。它包含了这个树上这个节点分叉的所有信息和对应的api。注意这里可以强调是路径，你可以在这里查阅它的含义以及对应的所有API。*/
+             /* AST编译参考 https://astexplorer.net/*/
+             console.log('AST匹配到箭头函数',nodePath)
+         }
+  }
+  return {
+    visitor
+  }
+}