如何在使用create-react-app创建的React应用程序的生产版本中删除console.log?
答案 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"] }]] : []
}
}