vuecli3+脚手架创建的项目下批量删除console.log(xxx)

vuecli3+脚手架创建的项目下批量删除console.log(xxx)

最终方式不是最好的方式，甚至是有开发好的插件 ，再次说这个内容只是体现一个对问题的思考

涉及内容 console.log、生产环境和开发环境的区分、简易自定义webpack loader

项目开发过程中相信大家都使用过console.log(xxx)在浏览器控制台中输出内容

通过它在控制台打印出来的东西会让我们安心也会让我们疑惑不解

正因为这样，它成为了我们开发过程中非常好用的调试方式，用来梳理复杂逻辑的执行顺序、监控执行步骤、查看我要获得的内容、当输出内容不在预期时可以让我们反向推导

然后用的多了难免会忘记删除，这样会被打包到生产环境中，虽然一般人也不会看但是这也是非常不合适的，因此我们怎么快速删除被遗忘的console.log(xxx)呢？

1、删除方式

• 1、vscode正则匹配之后直接replaceAll

• 2、rewriteConsoleLog

window.console.log=()=>{}

以上的方法很快，对不对，但是有些错误处理的console.log在开发模式下是必要的，因此在生产环境去掉冗余的console，开发和测试环境留着console方便测试。这样才比较合适

2、优化删除

• 1、rewriteConsoleLog

 rewriteConsoleLog() {    process.env.NODE_ENV === "production" && window.console.log=function () {} },

这样就区分了生产环境和开发环境，但是这样又有了一个新的问题，这样会多很多无用代码

3、再次优化

• 1、自定义webpack的loader

• (1) 、自定义loader

  • 项目下创建 loaders/ignore-console-log-loader.js

  const reg = /(console.log\()(.*)(\))/gmodule.exports = function (sourceCode) {    return sourceCode.replace(reg, '')}
  

• （2）、在vuecli3+创建的项目中修改webpack的配置vue.config.js

  • 添加一个新的 Loader:https://cli.vuejs.org/zh/guide/webpack.html#%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AA%E6%96%B0%E7%9A%84-loader

  chainWebpack: config => {   config.module     .rule('js')     .test(/\.js$/)     .use('ignore-console-log-loader')     .loader('ignore-console-log-loader')     .end()   },

  • 配置自定义的loader路径 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F

    configureWebpack: {        resolveLoader: {            // 指定自定义 loader 的位置目录              modules: ['node_modules', path.resolve(__dirname,    'loaders')]        },    }
  

• (3)、区分开发环境生产环境

  if (process.env.NODE_ENV === 'production') {}

4、最终vue.config.js的代码

let path = require("path")module.exports = {    chainWebpack: config => {        if (process.env.NODE_ENV === 'production') {            // 为生产环境修改配置...            config.module                .rule('js')                .test(/\.js$/)                .use('ignore-console-log-loader')                .loader('ignore-console-log-loader')                .end()        }    },    configureWebpack: {        resolveLoader: {            // 指定自定义 loader 的位置目录              modules: ['node_modules', path.resolve(__dirname, 'loaders')]        },    }}