不想eject，还咋修改create-react-app的配置？

Posted 2021-09-14 胡哥有话说

一、先抛问题

许多刚开始接触create-react-app框架的同学，不免都会有个疑问：如何在不执行eject操作的同时，修改create-react-app的配置。今天胡哥就来带大家一起来看看这个问题~

二、为啥不建议执行eject

1. 执行eject产生了什么变化？

create-react-app框架本身将webpack、babel的相关配置封装在了react-scripts中， 执行yarn eject后，会将webpack、babel等配置暴露在config目录下，同时scripts目录下会有新的命令文件更新，package.json文件中scripts命令同步更新。

2. 执行eject带来了什么问题？

首先，执行eject是不可逆的，复杂的webpack等配置由框架本身转交给用户自己进行维护了。

其次，在版本迭代时，如果更新了react、react-scripts、eslint、tsconfig等依赖，有可能会引起版本依赖的问题，即使我们按错误信息修复了之后，项目还是无法运行。

所以我们一般不太建议使用yarn eject的方式暴露create-react-app框架的配置。

三、有需求咋解决

实际开发中，我们还是需要更新webpack、babel的配置，比如：

• antd的按需加载；
• 配置css预处理器 - less；
• 设置alias、externals；
• 生产环境打包-去除console.log、debugger；
• 打包结果优化分析；
• 打包增加进度条提示；

前方高能预警~

借助react-app-rewired和customize-cra来完成配置的扩展~

这里划重点，记住要考呦~

我们划分几个步骤，来一一实现：

1. 下载安装依赖

   yarn add react-app-rewired customize-cra -D

   胡哥现在使用的版本是 react-app-rewired@^2.1.8 、customize-cra@^1.0.0

2. 配置package.json的命令

   "scripts": {
   -   "start": "react-scripts start",
   +        "start": "react-app-rewired start",
   -   "build": "react-scripts build",
   +   "build": "react-app-rewired build",
   }

3. 在根目录下配置config-overrides.js文件

   module.exports = {}

完成了基础配置后，我们在config-overrides.js中进行详细配置，解决我们上面的需求问题。

1. antd的按需加载

   安装依赖:

   yarn add antd -D

   配置

   cosnt { override, fixBabelImports } = require(\'customize-cra\');
   
   module.exports = override(
       fixBabelImports(
         "import",
       {
               "libraryName": "antd",
         "libraryDirectory": "es",
         "style": "css"
       }
     )
   )

1. 配置css预处理器 - less

   为啥在这里只强调了less呢，因为create-react-app中内置了sass/scss的预处理器，只需要使用时安装相关的依赖就可以了（运行时，根据提示缺失的包进行安装即可）。

   yarn add sass -D

   接下来我们来less的是如何支持的

   安装依赖：

   yarn add less less-loader@7.3.0 -D

   注意这里less-loader的版本 less-loader@7.3.0，如果是最新的版本和上面的react-app-rewired和customize-cra版本配合配置时有问题，所以使用了低版本的。

   less-loader的最新版本其实是为了配合webpack@5.0使用的。

   配置

   const { override, addLessLoader } = require(\'customize-cra\');
   
   module.exports = override(
       addLessLoader({
           // 这里可以添加less的其他配置
           lessOptions: {
              // 根据自己需要配置即可~
       }
       })
   );

1. 设置alias、externals；

   const { override, addWebpackAlias } = require(\'customize-cra\');
   const path = require(\'path\');
   
   module.exports = override(
     // alias
       addWebpackAlias({
       // 加载模块的时候，可以使用“@”符号来进行简写啦~
       \'@\': path.resolve(__dirname, \'./src/\')
     }),
     // externals
     addWebpackExternals({
       // 注意对应的在public/index.html引入jquery的远程文件地址
       "jQuery": "jQuery"
     })
   )

1. 生产环境打包-去除console.log、debugger；

   安装依赖

   yarn add uglifyjs-webpack-plugin -D

   配置

   const { override, addWebpackPlugin } = require(\'customize-cra\');
   const  UglifyJsPlugin = require(\'uglifyjs-webpack-plugin\');
   
   module.exports = override(
       // 注意是production环境启动该plugin
       process.env.NODE_ENV === \'production\' && addWebpackPlugin(
         new UglifyJsPlugin({
             // 开启打包缓存
             cache: true,
             // 开启多线程打包
             parallel: true,
             uglifyOptions: {
                 // 删除警告
                 warnings: false,
                 // 压缩
                 compress: {
                     // 移除console
                     drop_console: true,
                     // 移除debugger
                     drop_debugger: true
                 }
             }
         })
     )
   )

1. 打包结果优化分析；

   安装依赖

   yarn add webpack-bundle-analyzer cross-env -D

   cross-env用于配置环境变量

   配置

   // package.json文件
   "scripts": {
       "build:analyzer": "cross-env ANALYZER=true react-app-rewired build"
   }

   // config-overrides.js
   const { override, addWebpackPlugin } = require(\'customize-cra\');
   const { BundleAnalyzerPlugin } = require(\'webpack-bundle-analyzer\');
   
   module.exports = override(
     // 判断环境变量ANALYZER参数的值
       process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin())
   )

1. 打包增加进度条提示；

   安装依赖

   yarn add progress-bar-webpack-plugin -D

const { override, addWebpackPlugin } = require(\'customize-cra\');
const ProgressBarPlugin = require(\'progress-bar-webpack-plugin\');

module.exports = override(
    addWebpackPlugin(new ProgressBarPlugin())
)

以上就是我们实现几个需求的配置。我们来看看完整的config-overrides.js文件。

// config-overrides.js
cosnt { override, fixBabelImports, addWebpackPlugin, addLessLoader, addWebpackAlias, addWebpackExternals } = require(\'customize-cra\');
const path = require(\'path\');
const  UglifyJsPlugin = require(\'uglifyjs-webpack-plugin\');
const { BundleAnalyzerPlugin } = require(\'webpack-bundle-analyzer\');
const ProgressBarPlugin = require(\'progress-bar-webpack-plugin\');

module.exports = override(
    fixBabelImports(
      "import",
    {
            "libraryName": "antd",
      "libraryDirectory": "es",
      "style": "css"
    }
  ),
  addLessLoader({
        // 这里可以添加less的其他配置
        lessOptions: {
           // 根据自己需要配置即可~
    }
    }),
  // alias
    addWebpackAlias({
    // 加载模块的时候，可以使用“@”符号来进行简写啦~
    \'@\': path.resolve(__dirname, \'./src/\')
  }),
  // externals
  addWebpackExternals({
    // 注意对应的在public/index.html引入jquery的远程文件地址
    "jQuery": "jQuery"
  }),
  // 注意是production环境启动该plugin
    process.env.NODE_ENV === \'production\' && addWebpackPlugin(
      new UglifyJsPlugin({
          // 开启打包缓存
          cache: true,
          // 开启多线程打包
          parallel: true,
          uglifyOptions: {
              // 删除警告
              warnings: false,
              // 压缩
              compress: {
                  // 移除console
                  drop_console: true,
                  // 移除debugger
                  drop_debugger: true
              }
          }
      })
  ),
  // 判断环境变量ANALYZER参数的值
    process.env.ANALYZER && addWebpackPlugin(new BundleAnalyzerPlugin()),
  addWebpackPlugin(new ProgressBarPlugin())
)

后记

以上就是胡哥今天给大家分享的内容，喜欢的小伙伴记得点赞、收藏呦，关注胡哥有话说，学习前端不迷路，欢迎多多留言交流...

胡哥有话说，专注于大前端技术领域，分享前端系统架构，框架实现原理，最新最高效的技术实践！