发布于 2026-01-06 4 阅读
0

从生产模式中移除 console.log 开发者全球展示挑战赛,由 Mux 呈现:展示你的项目!

从生产模式中移除 console.log

由 Mux 主办的 DEV 全球展示挑战赛:展示你的项目!

console.log`console.log`是我们作为 JavaScript 开发者使用的调试工具或日志记录器之一。它允许开发者以一种非侵入式的方式编写代码,告知他们代码正在执行的操作。但是,这段小小的代码片段可以对我们的代码库产生以下影响。

日志

🎯 提升我们的应用程序性能,提高我们在生产环境中的计算能力和运行速度。

🎯 还会创建一个变量并占用内存,尽管微乎其微。

🎯 泄露一些可能会使您的应用面临风险的信息。

让我们来看一下下面的代码片段。

const { email, password } = req.body;
const user = await User.findOne({ email });
console.log(user);
if (!user || user === null) {
  return errorResMsg(res, 400, "this email does not exist");
}
//...
//create token
const token = await jwt.sign(
  {
    id: user._id,
    email: user.email,
    fullName: user.fullName,
  },
  process.env.USER_SECRET,
  {
    expiresIn: "2d",
  }
);
console.log(token);
Enter fullscreen mode Exit fullscreen mode

在上面的代码中,我记录了用户以及令牌攻击者可以利用这一点从我们的应用程序中窃取信息。

综上所述,让我们来看看console.log从应用程序中移除的两种方法。

VS Code 方法

此方法使用搜索图标和正则表达式删除所有内容logs

// Classes are templates for creating objects
// Method 1: Class function

class Person {
  constructor(name, age, occupation) {
    this.age = age;
    this.name = name;
    this.occupation = occupation;
  }

  todo() {
    console.log("kill");
  }
}

const createPerson = new Person("Abayomi", 78, "dev");
console.log(createPerson.todo());

// Method 2: Class Expression
const doSomething = class HouseChores {
  constructor(cut, clean, arrange) {
    this.cut = cut;
    this.clean = clean;
    this.arrange = arrange;
  }
};

const datInfo = {
  cut: (doSomething.cut = "grass"),
  clean: (doSomething.clean = "cars"),
  arrange: (doSomething.arrange = "house"),
};

console.log(datInfo);

// static types
class Music {
  constructor(viola, trombone) {
    this.viola = viola;
    this.trombone = trombone;
  }

  static musicConstant = "drums";
}

const result = new Music("Eb", "F#");
console.log(result);
console.log(Music.musicConstant); // static types are called without instantiating
Enter fullscreen mode Exit fullscreen mode
  • 点击搜索图标图片描述

  • 输入 console.log图片描述

  • 点击正则表达式选项图片描述

  • 点击全部替换

图片描述


  • 点击“替换”选项

图片描述


  • 结果:图片描述

方法二:

方法一虽然很酷,但我认为它是一种破坏性的做法。万一你在开发模式下还需要日志怎么办?🙄

以下是解决方法。

.env在项目根目录下创建文件NODE_ENV=development

安装 dotenv 软件包并进行配置

const env = require("dotenv");
env.config();
Enter fullscreen mode Exit fullscreen mode

现在让我们用朋友来测试一下环境变量。

console.log(process.env.NODE_ENV);

图片描述

最后要写的是一行简单的代码。

if (process.env.NODE_ENV === "development") {
  console.log = function () {};
}
Enter fullscreen mode Exit fullscreen mode

上面的代码表示,如果我们的环境变量处于开发模式,则输出一个空函数,该函数不输出任何内容。

启用该代码片段后,如果您运行代码,终端应该不会输出任何内容。

图片描述

注释掉这段代码后,它会将结果记录到我们的终端。
图片描述


讨论

除了上述方法之外,还可以使用哪些其他方法?

文章来源:https://dev.to/drsimplegraffiti/remove-consolelog-from-production-mode-4d8i