Question

如何在使用create-react-app创建的React应用程序的生产版本中删除console.log？

Answer 1

该问题的简单解决方案是帮助面临相同问题的其他人。

参考：https://stackoverflow.com/a/41041580/3574669

参考中的建议，它需要在文件“ webpack.config.js”中进行更改。 create-react-app内部使用webpack和config文件，但无法在应用程序根目录中添加webpack.config.js来应用更改。这将需要保留create-react-app设置，并为Webpack和配置构建自己的设置。在进行了很多探索并编写了示例代码之后，这对我来说并不容易。

由于我对create-react-app非常满意，所以也不想放弃它的好处。

最后，我通过添加一行/node_modules/react-scripts/config/webpack.config.js来对drop_console: true,进行了简单的更改，如参考文献中所述。参考中建议的代码如下，

module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        sourceMap: true, // Must be set to true if using source-maps in production
        terserOptions: {
          compress: {
            drop_console: true,
          },
        },
      }),
    ],
  },
};

这对我来说很好，通过简单的更改，我的生产构建应用程序中就没有控制台日志。

我正在使用"react-scripts": "3.0.1",

注意：每当您以后重新安装“反应脚本”时，都会清除此新行。因此，在这种情况下，需要再次进行相同的更改。

Answer 2

这就是我所做的。使用名为helper

的文件创建一个ConsoleHelper.js文件夹

const ConsoleHelper = (data) => {
  if (process.env.NODE_ENV === 'production') return;
  console.log(data);
}

export default ConsoleHelper;

代替console.log(data)做ConsoleHelper(data)；

希望这会有所帮助。我控制台很多日志：）

Answer 3

简单的方法是在名为logger.js的根目录中创建一个新文件

在logger.js中

var logger = function logger(...messages){
    if(process.env.NODE_ENV === 'development'){
        console.log(messages);
    }
}
exports.logger = logger;

现在将这个logger.js文件导入到您的组件中。例如我的组件文件是demo.jsx

import React from 'react';
var logger = require('../logger.js').logger;

class Demo extends React.Component{
    constructor(props){
    }

    render(){
        return(
            <p>Hello i am demo component</p>
        );
    }

    componentDidMount(){
        logger('I am printing only in developmet')
    }
}
export default Demo;

Answer 4

这是我使用 craco 的解决方案。

"@craco/craco": "^6.0.0",
"react-scripts": "4.0.1",

craco.config.js

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      if (process.env.NODE_ENV === 'production') {
        // remove console in production
        const TerserPlugin = webpackConfig.optimization.minimizer.find((i) => i.constructor.name === 'TerserPlugin');
        if (TerserPlugin) {
          TerserPlugin.options.terserOptions.compress['drop_console'] = true;
        }
      }

      return webpackConfig;
    },
  },
};

Answer 5

这是我使用 craco

的解决方案

安装https://babeljs.io/docs/en/babel-plugin-transform-remove-console/

并像更新 craco.config.js 一样

module.exports = {
  plugins: [{ plugin: require('@semantic-ui-react/craco-less') }],
  babel: {
    // ...
  plugins: process.env.NODE_ENV === "production" ? [["transform-remove-console", { "exclude": ["error"] }]] : []
  }
}

如何在使用create-react-app创建的React应用程序的生产版本中删除console.log？

5 个答案: