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

简介: 不想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


  1. 配置package.json的命令


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


  1. 在根目录下配置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())
)


相关文章
|
2月前
|
移动开发 开发框架 小程序
uni-app:demo&媒体文件&配置全局的变量(三)
uni-app 是一个使用 Vue.js 构建多平台应用的框架,支持微信小程序、支付宝小程序、H5 和 App 等平台。本文档介绍了 uni-app 的基本用法,包括登录示例、媒体文件处理、全局变量配置和 Vuex 状态管理的实现。通过这些示例,开发者可以快速上手并高效开发多平台应用。
|
4月前
【Azure 应用服务】Web App Service 中的 应用程序配置(Application Setting) 怎么获取key vault中的值
【Azure 应用服务】Web App Service 中的 应用程序配置(Application Setting) 怎么获取key vault中的值
|
3月前
|
前端开发
react配置proxy代理的两种方式
本文介绍了在React项目中配置代理的两种方式:通过在package.json中添加代理配置,以及通过创建setupProxy.js文件来实现更复杂的代理规则。
127 2
|
3月前
【Azure Logic App】使用Event Hub 连接器配置 Active Directory OAuth 认证无法成功连接到中国区Event Hub的解决之法
An exception occurred while retrieving properties for Event Hub: logicapp. Error Message: 'ClientSecretCredential authentication failed: AADSTS90002: Tenant 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' not found. Check to make sure you have the correct tenant ID and are signing into the correct cloud. Che
|
4月前
|
存储 监控 前端开发
|
4月前
|
开发框架 .NET Windows
【App Service】在App Service中配置Virtual applications and directories,访问目录中的静态文件报错404
【App Service】在App Service中配置Virtual applications and directories,访问目录中的静态文件报错404
|
4月前
|
C++
【Azure Logic App】使用Event Hub 连接器配置 Active Directory OAuth 认证无法成功连接到中国区Event Hub
【Azure Logic App】使用Event Hub 连接器配置 Active Directory OAuth 认证无法成功连接到中国区Event Hub
|
4月前
|
Java 应用服务中间件 开发工具
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
|
4月前
|
Java 应用服务中间件 Windows
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
|
4月前
|
Java
【Azure 应用服务】如何查看App Service Java堆栈JVM相关的参数默认配置值?
【Azure 应用服务】如何查看App Service Java堆栈JVM相关的参数默认配置值?
【Azure 应用服务】如何查看App Service Java堆栈JVM相关的参数默认配置值?