一、前端框架（或者庫）升級的原因：
a、前端技術更新比較快，需要不斷更新保持技術和依賴都和社區同步。當前項目基於CRA於2919年年中開發的腳手架搭建，插件和工具類版本已經過時，大部分外部依賴庫都有很大升級而且我們無法控制，如果不升級，一年后項目會沒法啟動本地開發環境，也沒法打包部署上線；
b、新版腳手架對性能和開發體驗都進行了很多優化，新版腳手架基於社區2021年的相對最優解決方案和依賴。如vite2.0、react17（相比react16版本有了核心實現的重構）等；
二、詳細描述要升級的框架以及類庫。從哪個版本到哪個版本。有什么要注意的等等
a、antd 不做大版本升級；
b、react-script 3.0.1 → 4.0.3 腳手架的版本，無法向后兼容；(antd不做升級，對應的webpack5用不了，只能用webpack4.x的版本，所以對應的react-script只能升級到4.0.3，webpeck版本為4.44.2)
c、copy-webpack-plugin 調用方法有更改，無法向后兼容；
d、node less-loader less node-sass 的版本需要特別處理，需要在升級過程中調整相應的兼用版本；
三、升級的具體步驟
在項目目錄下運行:
安裝ncu
npm i -g npm-check-updates
ncu -u
rm -rf node_modules
npm i
有以下一些包要更新：
注意：
antd，less，less-loader不能升級到最新的版本，因為項目對antd做了很多定制化開發，andt升級改動較大，antd對less-loader的版本有依賴；
"less": "^3.10.3", "less-loader": "^5.0.0", "antd": "^3.26.19",
根據各依賴包版本升級之間的log，分析受影響的代碼模塊，開發自測；
使用 webpack-bundle-analyzer 插件分析build后的各個文件的大小，及時優化太大的js文件；
四、升級后的驗證步驟有幾步（保證升級后不破壞現有功能）
a、頁面部署好之后能否正常打開；
b、頁面有無報錯信息，以及報錯信息的類型;
c、冒煙測試是否能通過;
d、各功能模塊流程是否能正常走通；
e、切記不要漏掉 WPA(web performance audit)；
五、接下來分享升級過程的具體報錯及解決方案。
1. copy-webpack-plugin 調用方法有更改，無法向后兼容；具體寫法也可以在項目中node_modules-->copy-webpack-plugin-->README.md中看到。
new CopyWebpackPlugin({ patterns: [ { from: "source", to: "dest" }, { from: "other", to: "public" }, ], })
2. Failed to load config "react-app" to extend from.
多數問題在於eslint缺失導致加載失敗
yarn add eslint-config-react-app
3.Error: Duplicate plugin/preset detected.If you'd like to use two separate instances of a plugin,they need separate names, e.g.
plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]
這個問題是：插件重復，先在面板中看有沒有重復的依賴或者插件，找到項目文件中的babel.cofig.js/config-overrides.js ，發現重復的項 。
4. Attempted import error: 'Prompt' is not exported from 'react-router-dom'
react-router-dom結合項目，只能升級到5.3.0。
"react-router-dom": "^5.3.0",
5. Attempted import error: 'array-move' does not contain a default export (imported as 'arrayMove').
arrayMove寫法發生改變，
錯誤寫法：
import arrayMove from 'array-move';
正確寫法：
import { arrayMoveImmutable } from 'array-move';
6. ./src/index.sass (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/index.sass)
Node Sass version 7.0.1 is incompatible with ^4.0.0 || ^5.0.0 || ^6.0.0.
此錯誤來自sass-loader。server不匹配。
解決方案：降低node-sass版本。
卸載node-sass :
npm uninstall node-sass
注意：
如果這邊卸載報錯的話，建議直接在package.json 中把 node-sass 改成4.14.1， 再從文件夾中刪除node_module文件夾， 刪除后再npm install
package.json：
"node-sass": "^4.14.1",
刪除node_modules
rm -rf node_modules
重新安裝
yarn
注意：
node-sass6以上版本，node版本必須升級為16以上。目前我的node版本是: v14.17.6, node-sass版本：v4.14.1
https://github.com/sass/node-sass
7. ./node_modules/antd/es/icon/style/index.less (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-8-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-8-3!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-8-4!./node_modules/antd/es/icon/style/index.less)
TypeError: this.getOptions is not a function
原因： less-loader安裝的版本過高
解決方案：
npm uninstall less-loader
"less": "^3.10.3",
"less-loader": "^5.0.0",
yarn
8. Module not found: Can't resolve 'react-pdf/dist/Page/AnnotationLayer.css' in '/Users/ito-user/Desktop/upgrade/drs-web-pos/src/kits/porPdf'
導入出錯：
以前版本：
import 'react-pdf/dist/Page/AnnotationLayer.css';
現在版本：
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
9. Parsing error: This experimental syntax requires enabling one of the following parser plugin(s): "decorators-legacy", "decorators".
解決方案：
npm i --save-dev customize-cra react-app-rewired
config-overrides.js：
const { override, addDecoratorsLegacy, disableEsLint } = require("customize-cra"); module.exports = override( addDecoratorsLegacy(), disableEsLint() );
package.json：
"scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-app-rewired eject" },