如何在使用 create-react-app CRA 创建的 React 应用程序的生产版本中删除 console.log？
【问题讨论】：
标签： reactjs build create-react-app console.log
我创建了一个 helper 文件夹，其中包含一个名为 ConsoleHelper.js 的文件
const ConsoleHelper = (data) => {
if (process.env.NODE_ENV === 'production') return;
console.log(data);
}
export default ConsoleHelper;
所以，不要使用console.log(data)，而是使用ConsoleHelper(data)；
【讨论】：
我正在使用这种方法来避免弹出react-scripts
if (process.env.NODE_ENV === 'production') {
console.log = () => {}
console.error = () => {}
console.debug = () => {}
}
index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import './styles/main.scss'
// replace console.* for disable log on production
if (process.env.NODE_ENV === 'production') {
console.log = () => {}
console.error = () => {}
console.debug = () => {}
}
ReactDOM.render(<App />, document.getElementById('root'))
【讨论】：
这是我使用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"] }]] : []
}
}
【讨论】：
这是我使用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;
},
},
};
【讨论】：
问题的简单解决方案是帮助面临同样问题的其他人。
参考：https://stackoverflow.com/a/41041580/3574669
参考中的建议，需要对文件“webpack.config.js”进行修改。 create-react-app 在内部使用 webpack 和配置文件，但无法在我的应用程序根目录中添加 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, // << this needs only to remove console.log //
},
},
}),
],
},
};
这对我来说很好，通过简单的更改，我的生产构建应用程序中没有控制台日志。
我正在使用"react-scripts": "3.0.1",
注意：每当您稍后重新安装“react-scripts”时，都会清除此新行。所以它需要在这样的事件中再次做同样的改变。
【讨论】：
简单的方法是在根目录下创建一个名为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;
【讨论】：