? ? ? 很久沒(méi)有更新了,最近有閑了下來(lái),剛好又是新舊交替的時(shí)間,靜下心來(lái)寫(xiě)一篇.
? ? ? 第一:記錄下自己這次的升級(jí)小節(jié)? ?第二:? 回顧過(guò)去 總結(jié)未來(lái).
? ? ?閑話后面說(shuō),正式進(jìn)入正題吧. 公司的項(xiàng)目告一段落,使用ceate react app 構(gòu)建,在開(kāi)始的時(shí)候是1.0 的版本,等到要上線了,cra已經(jīng)升級(jí)到2.0了,在上線之前要升級(jí)打包,方便后面的工作.?
? ? 既然要升級(jí),當(dāng)然要問(wèn)問(wèn)升級(jí)能帶來(lái)那些好處好優(yōu)勢(shì).我們先看看2.0的變化.主要是亮點(diǎn):
????第一是:CSS 工具支援： Sass蹂安、CSS Modules
????第二是: Babel 7镰禾、webpack 4、Jest 23
????但是每一次具體的版本更新的內(nèi)容不一樣,大家有興趣可以去查看詳細(xì)的文檔.這里我貼出傳送門(mén)
????https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md
????這個(gè)鏈接是create-react-app的changelog,每次更新的具體內(nèi)容都可以在這里查看到.非常的詳細(xì).不得不說(shuō)react 團(tuán)隊(duì)十分的敬業(yè)啊.
????具體的升級(jí)十分的簡(jiǎn)單,直接 npm install --save --save-exact@react-scripts2.1.2版本號(hào)就行.前提是你沒(méi)有eject.
然后直接npm start 項(xiàng)目就跑起來(lái)咯.....
這里在說(shuō)一下版本號(hào)的問(wèn)題.我更新的日期是1.7 這時(shí)候2.1.3其實(shí)已經(jīng)發(fā)布咯(1.4發(fā)布),但是我看到更新的內(nèi)容不多,日期也太近,所以選擇了老一點(diǎn)的版本,主要是膽小求穩(wěn).
好啦, 版本更新完成 我們進(jìn)行下一步 eject
因?yàn)閑ject 是一次性的 ,你不可能go back? 嚇的我趕緊commit 了一下 ,? 萬(wàn)一壞了還能回去..
當(dāng)我要進(jìn)行eject 的時(shí)候碰到一個(gè)蛋疼的問(wèn)題,項(xiàng)目已經(jīng)被其他人eject 過(guò)一次了.官方文檔給出的說(shuō)法又是無(wú)法恢復(fù),如果重新改動(dòng)webpack 又太多.. 這個(gè)時(shí)候我嘗試reset eject. 網(wǎng)上也沒(méi)有啥例子..一篇空白..
我問(wèn)了問(wèn)同事說(shuō)你先刪除eject后的內(nèi)容然后在eject..不出意外..失敗.. 報(bào)錯(cuò)找不到eject 這個(gè)腳本..果斷調(diào)試起來(lái)在全局的node run-script找到原因..下面貼出截圖
可以看到在執(zhí)行run 的時(shí)候找不到對(duì)應(yīng)的命令導(dǎo)致報(bào)錯(cuò). 于是我做了如下幾步:
(我知道你們不想聽(tīng)過(guò)程我直接寫(xiě)結(jié)果)
1:添加 "eject":"react-scripts eject", 然后添加需要更新的版本?"react-scripts":"2.1.2"
2.刪除 node-module
3.package中清除jest.
4. 記得一定要add? commit 一下 不然會(huì)報(bào)錯(cuò)哦!!!!
eject 完成之后需要重新 npm install 一下 ,因?yàn)槟愕陌姹径几铝?.美滋滋 讓我們進(jìn)行下一步
為此我的電腦死機(jī)了.....好刺激...webstorm 太吃內(nèi)存了..
好啦,基本的工作做好了就開(kāi)始使用webpack4提取一下公共的組件做點(diǎn)優(yōu)化.
webpack 4提取公共的組件不再是之前的commonchunkplugin,已經(jīng)內(nèi)置使用splitChunks.具體的教程大家可以直接去官方文檔去看,配置真的是太多了,在這里我貼出我使用的.
? ? ?可以看到,這里我提取了三個(gè)公共的的部分.第一個(gè)就是node_module. 第二個(gè)是公共的js(引用超過(guò)2次的全部提取出來(lái)作為一個(gè)公共的),第三個(gè):是css 的公共提取
? ? ?本來(lái)我是想基本文件夾來(lái)提取的,后來(lái)想想還是不太適合.這塊我覺(jué)得更多的是根據(jù)自己的業(yè)務(wù), create-react-app? ?eject 出來(lái)之后又自己的analyze,最好是更具這個(gè)來(lái)做優(yōu)化和提取.這里我們的create react app 初步的升級(jí)告一段落,如有不對(duì),敬請(qǐng)諒解指正.
后面我會(huì)繼續(xù)優(yōu)化和大家分享...
