在creact-react-app当中使⽤craco插件，配置⽣产环境取消
console解决办法
选择react框架进⾏前端开发，基本上都会⽤到creat-react-app这个官⽅提供的脚⼿架。但是这个脚⼿架有个很⼤的弊端，不能直接对该脚⼿架的默认项进⾏配置。相⽐于vue最新的脚⼿架 @vue/cli⽽⾔，@vue/cli虽然也对webpack的配置进⾏了全⾯的封装，但是官⽅允许⽤户在项⽬根⽬录创建⼀个fig.js进⾏配置，并且提供了丰富的API，供⽤户去参考。从这⼀点⽽⾔，creat-react-app可以说是让⼈讨厌⾄极，根本⽆法和@vue/cli，相提并论。
如果⽤户想配置creat-react-app脚⼿架中的webpack进⾏⽅便开发的话，似乎只有通过npm run eject这⼀条路可以⾛，⽹上⼤部分教程也是这样，即把默认配置全部弹出进⾏操作。
但是，这种⽅法有两个缺点：
npm run eject命名不可逆，⼀旦配置⽂件暴露后就不可再隐藏
扩展的配置和create-react-app内建的webpack配置混合在了⼀起，不利于配置出现问题后的排查。
使⽤react-app-rewired再配置
是对create-react-app 进⾏⾃定义配置的社区解决⽅案。它不会直接去修改create-react-app的默认配置，⽽是在create-react-app 配置的基础上进⾏扩展。但是，这种⽅法要搭配  结合使⽤，并且这种⽅法已经被蚂蚁⾦服出品的ant-design前端UI组件，在 create-react-app 使⽤教程中被废弃了。⽽是推荐使⽤craco（⼀个对 create-react-app 进⾏⾃定义配置的社区解决⽅案）。
使⽤craco再配置
1.安装 craco
$ yarn add @craco/craco
# OR
$ npm install @craco/craco --save
2.在项⽬根⽬录新建fig.js⽂件
my-app
├── node_modules
react开发框架├── fig.js
└── package.json
3.修改 package.json⾥的启动配置
/* package.json */
"scripts": {
-  "start": "react-scripts start",
+  "start": "craco start",
-  "build": "react-scripts build",
+  "build": "craco build",
-  "test": "react-scripts test",
+  "test": "craco test",
}
4.在⽣产模式下取消控制台的console配置
取消console，最常⽤⽅法是安装uglifyjs-webpack-plugin
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
webpack: {
// 别名
alias: {
"@": solve("src"),
},
plugins: [
new UglifyJsPlugin({
uglifyOptions: {
compress: {
warnings: false,
drop_debugger: true,
drop_console: true,
},
},
sourceMap: false,
parallel: true,
}),
],
}
然后重启项⽬后会发现，
爆出这个错误：(plugin uglify) Error: Unexpected token: keyword «const»
查看安装的版本后发现，最新安装的版本是
原因:
1，是UglifyJS不⽀持ES6的语法。理论上不应该啊…
2，发现uglifyjs-webpack-plugin 2.0版本的Release⽇志中，明确提⽰重新切换回到uglify-js，因为uglify-es被废弃了。出现这个问题解决的办法有：
cnpm install uglifyjs-webpack-plugin@1 --save-dev
也就是说回退版本。
还有⼀个⽅法是移除uglifyjs-webpack-plugin，使⽤
npm install terser-webpack-plugin --save-dev
在fig.js中配置
const TerserPlugin = require('terser-webpack-plugin')
webpack: {
// 别名
alias: {
"@": solve("src"),
},
plugins: [
new TerserPlugin({
sourceMap: true, // Must be set to true if using source-maps in production
terserOptions: {
ecma: undefined,
warnings: false,
parse: {},
compress: {
drop_console: v.NODE_ENV === "production", // ⽣产环境下移除控制台所有的内容            drop_debugger: false, // 移除断点
pure_funcs:
},
},
}),
],
}
问题解决！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。