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

时间:2019-05-23 13:26:21

标签: reactjs build create-react-app console.log

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

5 个答案:

答案 0 :(得分:0)

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

参考: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",

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

答案 1 :(得分:0)

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

的文件创建一个ConsoleHelper.js文件夹
const ConsoleHelper = (data) => {
  if (process.env.NODE_ENV === 'production') return;
  console.log(data);
}

export default ConsoleHelper;

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

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

答案 2 :(得分:0)

简单的方法是在名为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;

答案 3 :(得分:0)

这是我使用 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;
    },
  },
};

答案 4 :(得分:0)

这是我使用 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"] }]] : []
  }
}