线上环境下如何避免 Webpack 打包时出现 console.log 语句

在实际开发中，我们经常会使用 console.log 语句来输出调试信息，但是在线上环境下，这些调试信息会暴露给用户，可能会导致安全问题或者泄露敏感信息。因此，我们需要在打包时去除这些 console.log 语句。

方法一：使用 UglifyJsPlugin

UglifyJsPlugin 是一个能够压缩和混淆 JavaScript 代码的 Webpack 插件，它也可以去除 console.log 语句。我们只需要在 Webpack 配置文件中加入以下代码：

// javascriptcn.com 代码示例
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  plugins: [
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          drop_console: true
        }
      }
    })
  ]
};

这样，在打包时，UglifyJsPlugin 会自动去除所有的 console.log 语句。

方法二：使用 babel-plugin-transform-remove-console

babel-plugin-transform-remove-console 是一个能够去除掉 JavaScript 代码中所有 console.log 语句的 Babel 插件。我们只需要在 babel 配置文件中加入以下代码：

module.exports = {
  // ...
  plugins: [
    ['transform-remove-console', { "exclude": ["error", "warn"] }]
  ]
};

这样，在打包时，babel-plugin-transform-remove-console 会自动去除所有的 console.log 语句。

需要注意的是，这个插件默认只会去除 console.log 语句，如果我们还需要去除其他的 console 语句，可以在 options 中添加 exclude 字段来指定。

方法三：手动去除 console.log 语句

如果我们不想使用插件去除 console.log 语句，也可以手动去除。我们可以在代码中添加以下代码：

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

这样，在线上环境下，console.log 函数就会被覆盖为空函数，从而达到去除 console.log 语句的目的。

总结

在线上环境下，去除 console.log 语句是非常必要的，可以避免敏感信息泄露和安全问题。我们可以使用 UglifyJsPlugin 或者 babel-plugin-transform-remove-console 插件来自动去除 console.log 语句，也可以手动去除。无论使用哪种方法，都需要在打包前进行配置，以确保线上环境的安全性。

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