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

Posted 2023-03-27

【中文标题】如何在开发中自动删除 console.logs()？

【英文标题】：How to automatically remove console.logs() in development?

【发布时间】：2021-02-18 17:19:21

【问题描述】：

问题

尝试对整个代码库中包含 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 放入预提交挂钩中。

【问题讨论】：

尽可能发布所有 gulpfile.js - 这是一个常见的 gulp 错误消息。其次，'./**.js' 不是您想要的 - 使用 './**/*.js' 会有很大的不同。

这就是我所有的 gulp 文件。 :) 大声笑我错过了什么吗？我会尝试你提供的路径。 @马克

【参考方案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"]

【讨论】：

babel 插件发生在构建时？我想什么时候执行是我的问题。我不能为此运行脚本吗？它只是在编译源代码时发生？

我之前没试过这个插件，但编译后看起来可以工作

好吧，酷。我投了赞成票。不完全是我想要的，但我认为它仍然很有价值，我将它添加到应用程序中谢谢 :)