React App Rewired介绍与使用Customize Cra使用

一.为什么要使用React App Rewired 和Customize Cra

1.CRA(create-react-app)为我们包装项目的基本结构

1.1下面是隐藏了create-react-app的package.json依赖

{
  "name": "firstoa-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  }

1.2下面是未隐藏的package.json依赖

 "dependencies": {
    "@babel/core": "^7.16.0",
    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
    "@svgr/webpack": "^5.5.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "babel-jest": "^27.4.2",
    "babel-loader": "^8.2.3",
    "babel-plugin-named-asset-import": "^0.3.8",
    "babel-preset-react-app": "^10.0.1",
    "bfj": "^7.0.2",
    "browserslist": "^4.18.1",
    "camelcase": "^6.2.1",
    "case-sensitive-paths-webpack-plugin": "^2.4.0",
    "css-loader": "^6.5.1",
    "css-minimizer-webpack-plugin": "^3.2.0",
    "dotenv": "^10.0.0",
    "dotenv-expand": "^5.1.0",
    "eslint": "^8.3.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-webpack-plugin": "^3.1.1",
    "file-loader": "^6.2.0",
    "fs-extra": "^10.0.0",
    "html-webpack-plugin": "^5.5.0",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^27.4.3",
    "jest-resolve": "^27.4.2",
    "jest-watch-typeahead": "^1.0.0",
    "mini-css-extract-plugin": "^2.4.5",
    "postcss": "^8.4.4",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-loader": "^6.2.1",
    "postcss-normalize": "^10.0.1",
    "postcss-preset-env": "^7.0.1",
    "prompts": "^2.4.2",
    "react": "^18.2.0",
    "react-app-polyfill": "^3.0.0",
    "react-dev-utils": "^12.0.1",
    "react-dom": "^18.2.0",
    "react-refresh": "^0.11.0",
    "resolve": "^1.20.0",
    "resolve-url-loader": "^4.0.0",
    "sass-loader": "^12.3.0",
    "semver": "^7.3.5",
    "source-map-loader": "^3.0.0",
    "style-loader": "^3.3.1",
    "tailwindcss": "^3.0.2",
    "terser-webpack-plugin": "^5.2.5",
    "web-vitals": "^2.1.4",
    "webpack": "^5.64.4",
    "webpack-dev-server": "^4.6.0",
    "webpack-manifest-plugin": "^4.0.2",
    "workbox-webpack-plugin": "^6.4.1"
  }

2.为什么要隐藏依赖?

因为create-react-app会自动整理帮我们处理兼容关系
如果我们要修改相关版本,那么则必须暴露其依赖,也就是说以后要自行维护
使用命令

npm run eject

3.React-app-Rewired可以为我们解决什么

他允许我们不使用 npm run eject暴露依赖,即可修改相关版本等

4.Customize Cra 又是什么鬼

customize-cra利用react-app-rewired的config-overrides.js文件。通过导入customize-cra函数并导出覆盖函数中包含的几个函数调用，您可以轻松修改组成create-react-app的底层配置对象

npm install customize-cra --save-dev

手动创建config-overrides.js,他可以覆盖配置

二.举个例子如何使用React-app-Rewired

2.1 安装React-app-Rwired

npm install react-app-rewired --save-dev

2.2修改 package.json，用 react-app-rewired 替换默认的 react-scripts 命令

这一步骤的作用表示构建,启动等,使用react-app-rewired已经给我们封装好的命令

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

2.3安装less(css预处理) 并手动创建config-overrides.js文件

安装less和less-loader

npm i less less-loader --save-dev

手动创建config-overrides.js 文件,此文件用于覆盖CRA的默认配置,并添加如下内容

//override 函数用于包装并修改 CRA 默认的 Webpack 配置
//addLessLoader 函数用于在 Webpack 配置中添加 Less 支持
const {
    override,
    addLessLoader,
  } = require('customize-cra')
  
  module.exports = override(
    addLessLoader({
      lessOptions: {
        javascriptEnabled: true, //启用 Less 支持 JavaScript 特性，通常用于引用 JavaScript 中的变量和函数。
        relativeUrls: false, //禁用相对路径 URL，通常在构建后的 CSS 文件中使用绝对路径的 URL。
        modifyVars: { '@primary-color': '#A80000' }, //修改 Less 变量 @primary-color 的值为 #A80000，这是 Ant Design 中常用的一种主题色。这个配置选项允许你在 Less 文件中使用 Less 变量，并修改其默认值。
      }
    })
  )
  

2.4 npm start启动即可