如何在开发中自动删除console.logs()？

Question

问题

尝试对一个旧的 React 应用程序进行 lint，该应用console.logs()程序的代码库中有 30 多个代码。我分别设置了 linter 和代码格式化程序 ESLint 和 Prettier。

这个设置效果很好，它向我展示了console.logs()源代码中的位置。但是，--fixESLint 的标志不会删除日志。有什么办法可以自动删除console.logs()吗？我看过有关如何通过 webpack 执行此操作以防止日志投入生产的文章，但是，我想在预提交或预推送挂钩中尽早删除这些内容。

我尝试过的

我尝试使用设置脚本gulp-strip-debug。它因断言错误而失败。当我将 src 路径从 更改为 时，'./src/**.js'我'./**.js'没有收到断言错误，但什么也没有发生。

从 Jun711 博客了解到这一点。“如何以编程方式从 JavaScript 文件中删除控制台日志？” 博客文章。

吞咽文件

gulpfile.js: 项目根目录

const gulp = require('gulp');
const stripDebug = require('gulp-strip-debug');
gulp.task(
  'strip-debug',
  () =>
    gulp
      .src('./src/**.js') // input file path
      .pipe(stripDebug()) // execute gulp-strip-debug
      .pipe(gulp.dest('./')) // output file path
);

包.json

{
  "name": "end-the-pandemic",
  "version": "1.0.0",
  "dependencies": {
    "shelter-in-place": "11.5.20",
    "stay-home": "11.5.21",
    "who-is-still-voting-for-trump": "11.3.20", 
    "seriously-why": "2.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "lint": "eslint '*/**/*.js' --quiet --fix",
    "clean": "gulp strip-debug",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
  },
...

终端

yarn clean

输出

AssertionError [ERR_ASSERTION]: Task function must be specified

显然，我可以在写这个问题的时间里手动进行搜索并删除其中的大部分内容，但为了将来的参考，有没有办法用命令来做到这一点？如果可能的话，我想添加yarn clean一个预提交挂钩。

Answer 1

你可以用这个技巧，在这种情况下会很好

if (env === 'production') {
    console.log = function () {};
}

这会将实际log函数覆盖为空函数

确保将其添加到 React 应用程序的顶部

另一种解决方案

有一个名为的软件包babel-plugin-transform-remove-console可以在安装后为您提供帮助npm

npm install babel-plugin-transform-remove-console

安装后.babelrc在项目根目录中创建一个文件dir 并将此行添加到其中

{
  "plugins": ["transform-remove-console"]
}