項(xiàng)目中react-scripts初始版本是3.4.1蚕涤，好多年了一直沒(méi)有人升級(jí)。
現(xiàn)在react官方的create-react-app版本已經(jīng)到了5.x铣猩，而且官方都不怎么維護(hù)揖铜，開(kāi)始在官方推薦nextjs之類的其他腳手架。
因?yàn)榘姹具^(guò)低达皿，eslint蛮位，和typescript之類的配套都用得不是很舒服较沪。。失仁。而且編譯之類的也很慢尸曼。。萄焦。
遷移到vite,rspack之類的代價(jià)太大了控轿，我準(zhǔn)備先升級(jí)cra到最新版本看看。
升級(jí)的版本就是按照官方的changelog文件拂封，跟著他的版本升級(jí)茬射。
https://github.com/facebook/create-react-app/blob/main/CHANGELOG-3.x.md
之前也嘗試過(guò)直接安裝5.0，但是報(bào)錯(cuò)太多冒签，直接放棄了在抛。
跟著版本升級(jí)相對(duì)比較容易。萧恕。刚梭。
下面主要記錄發(fā)生報(bào)錯(cuò)，需要其他調(diào)整的版本
4.0.0
這個(gè)版本升級(jí)了eslint相關(guān)票唆，然后cacro報(bào)錯(cuò)了朴读。
需要我們把cacro版本升級(jí)
yarn add --exact @craco/craco@6.0.0 -D
另外還有一個(gè)啟動(dòng)時(shí)的報(bào)錯(cuò)
noFallthroughCasesInSwitch
這個(gè)我們搜索changelog發(fā)現(xiàn)，在4.0.1就修復(fù)了走趋，所以我們直接升級(jí)4.0.1
4.0.1
yarn add --exact react-scripts@4.0.1
升級(jí)到4.0.1我們發(fā)現(xiàn)衅金，官方啟動(dòng)的時(shí)候，直接改了你的tsconfig配置 noFallthroughCasesInSwitch配置為true
還有圖片地址變成 [object Module]
似乎是webpack的file loader 默認(rèn)行為變了簿煌，需要配置
因?yàn)?.x版本氮唯，我發(fā)現(xiàn)總共只有3個(gè)版本，干脆直接升到4.0,3
4.0.3
控制臺(tái)報(bào)錯(cuò)提示你安裝一個(gè)插件,所以執(zhí)行一下安裝就行了
yarn add @babel/plugin-proposal-private-property-in-object -D
我們查看cacro更新文檔可以發(fā)現(xiàn)姨伟，7.0版本開(kāi)始都沒(méi)有什么破壞性改動(dòng)您觉，所以直接升到6.4.3
yarn add --exact @craco/craco@6.4.3 -D
typescript 干脆直接升級(jí)到4.x的最新版，雖然這個(gè)版本的cra似乎只支持到4.5左右授滓，但是但是問(wèn)題不大琳水。
yarn add --exact typescript@4.9.5 -D
這里出現(xiàn)一個(gè)問(wèn)題，ts原來(lái)的版本是3.9般堆，升到4.x后在孝，出現(xiàn)一個(gè)報(bào)錯(cuò)，就是scss 和png圖片文件開(kāi)始找不到了module了
這個(gè)問(wèn)題之前也碰到過(guò)淮摔，就是在d.ts聲明文件里聲明一下就好了私沮。(其實(shí)不用配置，因?yàn)閞eact-scripts的聲明文件里面幫你配好了)
結(jié)果發(fā)現(xiàn)還是報(bào)錯(cuò)和橙。
最后我發(fā)現(xiàn)是tsconfig配置的問(wèn)題仔燕，有一個(gè)inculde選項(xiàng)造垛，一般只要配你需要ts檢查的目錄就行了，一般只放一個(gè)src
但是我發(fā)現(xiàn)晰搀，我的"src/**/*.ts",也就是說(shuō)只檢查ts文件五辽，難怪報(bào)找不到module的錯(cuò)誤。外恕。杆逗。
可能3.x的版本是不檢查scss ，png這些資源的鳞疲。罪郊。。
接下來(lái)把圖片路徑導(dǎo)入改一下尚洽，建議都改成import導(dǎo)入
或者在require的后面加一個(gè).default
可以用vscode對(duì)require(搜索悔橄，基本上能找到圖片require引入的地方了
升到4.0.3，我們就可以先提交代碼腺毫，可以先停一停癣疟，觀察一段時(shí)間。拴曲。争舞。
5.0.1
直接升級(jí)到最新的5.0.1凛忿，因?yàn)槲野l(fā)現(xiàn)澈灼，除了最初的breaking change，后面基本是修修補(bǔ)補(bǔ)店溢。叁熔。。
yarn add --exact react-scripts@5.0.1 -D
craco 也升級(jí)到最新的7.1.0
yarn add @craco/craco@7.1.0 -D
craco start開(kāi)局就報(bào)錯(cuò)了
我猜測(cè)是craco的一些插件不兼容了床牧，所以我把webpack配置荣回，插件都注釋掉，可以成功啟動(dòng)戈咳。
之后出現(xiàn)webpack5的 78個(gè)error
先把eslint和ts check關(guān)了心软，不然錯(cuò)誤太多，影響我們查看webpack的報(bào)錯(cuò)
craco棄用插件移除
比如HardSourceWebpackPlugin,
這個(gè)插件可以移除了著蛙，因?yàn)椴恢С謜ebpack5删铃，而且webpack5已經(jīng)自帶cache功能了
然后我們把以前的webpack配置注釋掉，然后再慢慢加踏堡。猎唁。。顷蟆。
babel/runtime
首先第一個(gè)問(wèn)題是有很多 babel/runtime相關(guān)的報(bào)錯(cuò)诫隅，而且報(bào)錯(cuò)的地方不在我們的項(xiàng)目里腐魂，而是在node_modules里面。
比如antd的目錄里面就有好幾個(gè)報(bào)錯(cuò)逐纬。
似乎是因?yàn)榛滓伲瑆ebpack5，不在內(nèi)置babel的一些polyfill风题，所以我們需要自己安裝
執(zhí)行下面的代碼安裝最新版本的即可判导，現(xiàn)在是7.22.5版本
yarn add -D @babel/runtime
這個(gè)安裝完以后瞬間錯(cuò)誤就少了很多。
node ployfill
webpack5也移除了node 模塊的ployfill沛硅，以后我們用到的需要自己安裝了眼刃，
基本上node ployfill項(xiàng)目中也很少用到，我這邊看到的報(bào)錯(cuò)摇肌，大部分還是node_modules里看到的擂红。
這個(gè)現(xiàn)象可以說(shuō)webpack越來(lái)越極端了，和vite就是兩個(gè)方向的產(chǎn)品围小，webpack的配置是越來(lái)越麻煩昵骤。。肯适。
安裝下面幾個(gè)node模塊,就是報(bào)錯(cuò)里面提到的模塊变秦。
"path": "^0.12.7",
"process": "^0.11.10",
"stream": "^0.0.2",
"util": "^0.12.5"
"buffer": "^6.0.3"
這些都安裝了，之后就剩兩三個(gè)報(bào)錯(cuò)了框舔。
全路徑問(wèn)題 fully specific
webpack5 對(duì)路徑的要求也更嚴(yán)格蹦玫，需要是全路徑。刘绣。樱溉。 比如 import lll/index,要改成ll/index.js
這個(gè)我們可以在cacro里面關(guān)掉
configure: {
// webpack 5 引入js 必須完全聲明路徑，這個(gè)配置是排除這個(gè)報(bào)錯(cuò)
module: {
rules: [
{
test: /\.m?js/,
resolve: { fullySpecified: false },
},
],
},
},
},
svg namespace
這個(gè)報(bào)錯(cuò)是antd的Avatar上纬凤，加入svg圖標(biāo)報(bào)錯(cuò)福贞。
似乎是webpack5 對(duì)svg格式要求更嚴(yán)格導(dǎo)致的。
網(wǎng)上搜到的解決方案是讓你手動(dòng)把svg里面的命名改成駝峰命名
或者用一個(gè)svg轉(zhuǎn)jsx的網(wǎng)站停士。
手動(dòng)改svg太麻煩挖帘，放棄。svg轉(zhuǎn)jsx恋技，試了發(fā)現(xiàn)轉(zhuǎn)不了拇舀，也許是svg里面有中文的原因？
最后我用一個(gè)命令行工具解決了
npm i -g svgo
執(zhí)行命令轉(zhuǎn)化一下猖任，會(huì)把svg進(jìn)行壓縮你稚，去掉沒(méi)用的部分
svgo -i input.svg -o out.svg
process is not defined
process是node的模塊里唯一用到的，因?yàn)橛昧谁h(huán)境變量，來(lái)區(qū)分生產(chǎn)環(huán)境刁赖，測(cè)試環(huán)境搁痛。。宇弛。鸡典。
之前那些
很多其他模塊，都是node_modules里面的包報(bào)錯(cuò)枪芒，所以我們安裝那些模塊只是為了讓webpack知道怎么找那些包彻况。
process因?yàn)橛玫搅耍晕覀円寃ebpack知道舅踪。纽甘。。
const webpack = require('webpack')
webpack: {
plugins: {
add: [
new webpack.ProvidePlugin({
process: 'process/browser.js',
}),
new webpack.ProvidePlugin({
//...
Buffer: ['buffer', 'Buffer'],
}),
],
},
圖片 require
記得4.x版本抽碌，require圖片編程object module悍赢， 但是沒(méi)想到5.0.1版本又改回來(lái)了。货徙。
所以我們重新改回去左权，有問(wèn)題的地方。
也就是說(shuō)痴颊，不需要加.default了赏迟。
解決完上面的問(wèn)題，項(xiàng)目已經(jīng)可以正常運(yùn)行了
ts報(bào)錯(cuò)
我們把ts檢查打開(kāi)蠢棱，找到報(bào)錯(cuò)的地方解決就好了锌杀。
注意點(diǎn)
5.x版本已經(jīng)移除了12以下版本的支持，所以現(xiàn)在要用更新版本的node了裳扯。
webpack5 官方也有遷移指南抛丽，https://webpack.docschina.org/migrate/5/谤职，如果還有別的問(wèn)題饰豺，可以看看這個(gè)官方文檔吟宦。
