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

Question

问题

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

此设置效果很好，它向我显示了 console.logs() 在源代码中的位置。但是，ESLint 的 --fix 标志不会删除日志。有没有办法自动删除console.logs()？我已经看到有关如何通过 webpack 执行此操作以防止日志进入生产环境的文章，但是，我想在预提交或预推送挂钩中更早地删除这些。

我的尝试

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

从 Jun711 博客了解到这一点。 "How to remove console log from your JavaScript files programmatically?" 博文。

Gulpfile

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
);

Package.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

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

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