React 中去掉 console.log 的方法

在开发 React 应用时，我们经常会使用 console.log 来调试和输出信息。但是，在发布应用时，这些输出信息会影响应用的性能和安全性。因此，我们需要学习如何在发布应用时去掉 console.log。

方法一：手动删除

最简单的方法是手动删除所有的 console.log 语句。这种方法虽然简单，但是当代码行数很多时，需要耗费大量的时间和精力。

方法二：使用插件

我们可以使用插件来自动删除 console.log 语句。常用的插件有 babel-plugin-transform-remove-console 和 babel-plugin-transform-remove-debugger。

使用 babel-plugin-transform-remove-console

首先，我们需要安装 babel-plugin-transform-remove-console 插件：

npm install babel-plugin-transform-remove-console --save-dev

然后，在 .babelrc 文件中配置插件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    ["transform-remove-console", { "exclude": ["error", "warn"] }]
  ]
}

配置中的 exclude 属性用于指定不删除的 console 类型，例如 error 和 warn。

使用 babel-plugin-transform-remove-debugger

除了 console.log，我们还需要删除 debugger 语句。使用 babel-plugin-transform-remove-debugger 插件可以自动删除这些语句。

首先，我们需要安装 babel-plugin-transform-remove-debugger 插件：

npm install babel-plugin-transform-remove-debugger --save-dev

然后，在 .babelrc 文件中配置插件：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["transform-remove-debugger"]
}

方法三：使用环境变量

我们可以使用环境变量来控制是否输出 console.log 语句。在开发环境中，我们可以输出这些语句以便调试；在生产环境中，我们可以禁止输出这些语句。

例如，我们可以在 webpack.config.js 文件中添加以下代码：

// javascriptcn.com 代码示例
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  // ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(isProduction ? 'production' : 'development')
    })
  ]
};

然后，在代码中可以这样使用：

if (process.env.NODE_ENV !== 'production') {
  console.log('debug information');
}

总结

在 React 中去掉 console.log 语句可以提高应用的性能和安全性。我们可以手动删除这些语句，也可以使用插件或环境变量来自动删除。建议在发布应用前进行这项操作，以确保应用的质量和稳定性。

示例代码：

// javascriptcn.com 代码示例
import React from 'react';

const App = () => {
  const handleClick = () => {
    if (process.env.NODE_ENV !== 'production') {
      console.log('button clicked');
    }
  };

  return (
    <div>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
};

export default App;

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657bde50d2f5e1655d68fb76