• 不想eject,还咋修改create-react-app的配置?


    一、先抛问题

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

    二、为啥不建议执行eject

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

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

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

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

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

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

    三、有需求咋解决

    实际开发中,我们还是需要更新webpackbabel的配置,比如:

    • antd的按需加载;

    • 配置css预处理器 - less;

    • 设置alias、externals;

    • 生产环境打包-去除console.log、debugger;

    • 打包结果优化分析;

    • 打包增加进度条提示;

    前方高能预警~

    借助react-app-rewiredcustomize-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"
          }
        )
      )
      
    2. 配置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: {
         		// 根据自己需要配置即可~
          }
      	})
      );
      
    3. 设置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"
        })
      )
      
    4. 生产环境打包-去除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
        			}
        		}
        	})
        )
      )
      
    5. 打包结果优化分析;

      安装依赖

      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())
      )
      
    6. 打包增加进度条提示;

      安装依赖

      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())
    )
    

    后记

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

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

  • 相关阅读:
    Pytest训练营总结,内附考试题及答案
    环境问题还是测试的老大难?两个步骤轻松搞定
    测试必会 Docker 实战(一):掌握高频命令,夯实内功基础
    利器 | TestNG 与 Junit 对比,测试框架如何选择?
    技术分享 | 这些常用测试平台,你们公司在用的是哪些呢?
    干货|app自动化测试之模拟器控制
    技术分享 | 测试人员必须掌握的测试用例
    大话JMeter4|不同的并发数可以自动化做压测吗?
    战胜测试内卷转型测试开发,拿名企offer最多的班型是如何设计的?
    2022 云原生编程挑战赛启动!导师解析服务网格赛题
  • 原文地址:https://www.cnblogs.com/justbecoder/p/14649623.html
Copyright © 2020-2023  润新知