在creact-react-app当中使用craco插件，配置生产环境取消console解决办法

曾经终败给现在 2023-02-11 08:46 5阅读 0赞

选择react框架进行前端开发,基本上都会用到creat-react-app这个官方提供的脚手架。但是这个脚手架有个很大的弊端，不能直接对该脚手架的默认项进行配置。相比于vue最新的脚手架 @vue/cli而言，@vue/cli虽然也对webpack的配置进行了全面的封装，但是官方允许用户在项目根目录创建一个vue.config.js进行配置，并且提供了丰富的API，供用户去参考。从这一点而言，creat-react-app可以说是让人讨厌至极，根本无法和@vue/cli，相提并论。

如果用户想配置creat-react-app脚手架中的webpack进行方便开发的话，似乎只有通过npm run eject这一条路可以走，网上大部分教程也是这样，即把默认配置全部弹出进行操作。

但是，这种方法有两个缺点：

*  `npm run eject`命名不可逆，一旦配置文件暴露后就不可再隐藏
 *  扩展的配置和create-react-app内建的webpack配置混合在了一起，不利于配置出现问题后的排查。

### 使用react-app-rewired再配置 ###

[react-app-rewired][]是对create-react-app 进行自定义配置的社区解决方案。它不会直接去修改create-react-app的默认配置，而是在create-react-app配置的基础上进行扩展。但是，这种方法要搭配 [customize-cra][] 结合使用，并且这种方法已经被蚂蚁金服出品的ant-design前端UI组件，在 create-react-app 使用教程中被废弃了。而是推荐使用craco（一个对 create-react-app 进行自定义配置的社区解决方案）。

## 使用craco再配置 ##

1.安装 craco

$ yarn add @craco/craco
    
    # OR
    
    $ npm install @craco/craco --save

2.在项目根目录新建`craco.config.js`文件

my-app
    ├── node_modules
    ├── craco.config.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');
     module.exports = {
        webpack: {
        // 别名
        alias: {
          "@": path.resolve("src"),
        },
        plugins: [
          new UglifyJsPlugin({
            uglifyOptions: {
              compress: {
                warnings: false,
                drop_debugger: true,
                drop_console: true,
              },
            },
            sourceMap: false,
            parallel: true,
          }),
        ],
    }

然后重启项目后会发现，

![format_png][]

# 爆出这个错误：(plugin uglify) Error: Unexpected token: keyword «const» #

查看安装的版本后发现，最新安装的版本是

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70][]

原因:  
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，使用[terser-webpack-plugin][]

npm install terser-webpack-plugin --save-dev

在craco.config.js中配置

const TerserPlugin = require('terser-webpack-plugin')
     module.exports = {
      webpack: {
        // 别名
        alias: {
          "@": path.resolve("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: process.env.NODE_ENV === "production", // 生产环境下移除控制台所有的内容
                drop_debugger: false, // 移除断点
                pure_funcs:
                  process.env.NODE_ENV === "production" ? ["console.log"] : "", // 生产环境下移除console
              },
            },
          }),
        ],
    }

问题解决！

[react-app-rewired]: https://github.com/timarney/react-app-rewired
[customize-cra]: https://github.com/arackaf/customize-cra
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDIwLmNuYmxvZ3MuY29tL2Jsb2cvNzE4MzE4LzIwMjAwNS83MTgzMTgtMjAyMDA1MTEyMDI2NDAzMTctMTgwNTk5ODI4Ni5wbmc?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200522154844312.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4,size_16,color_FFFFFF,t_70
[terser-webpack-plugin]: https://github.com/webpack-contrib/uglifyjs-webpack-plugin/releases/tag/v2.0.0