為了實(shí)現(xiàn)路由按需加載,因?yàn)橛|及到版本的相關(guān)問題(版本詳情),所以本著折騰的原則,想去嘗試升級(jí)一下,也是為了以后實(shí)踐項(xiàng)目多知道幾個(gè)坑吧.
情況是這的,之前也不知道版本信息的要求,直接在電腦上開搞了.用的官方的create-react-app.
-
升級(jí)前的相關(guān)環(huán)境
-
node -v=> 4.幾的忘記了 -
npm -v=> 3.幾的忘記了. -
webpack version=> 1.14.0 -
react-router-dom=> 4.2.2 -
react-scripts=> 0.9.x
-
-
升級(jí)后的環(huán)境.
-
node -v=> 6.1.0 -
npm -v=> 4.6.1 -
webpack version=> 3.5.6 -
react-router-dom=> 4.2.2 -
react-scripts=> 1.0.x(3)
-
咋說呢,其實(shí)升級(jí)也還好,按照官方的來就好了.
但是,因?yàn)轫?xiàng)目里使用了antd.三月份的時(shí)候,想接觸學(xué)習(xí)react,就寫了一個(gè)Todo并引入了ant-design.擱淺了幾個(gè)月,這幾天要做一個(gè)權(quán)限管理的demo. 所以現(xiàn)在的這個(gè)demo就按照之前的那個(gè)配置來了.那個(gè)時(shí)候是需要暴露出配置去修改.現(xiàn)在官方文檔已經(jīng)修改了.
因?yàn)?code>eject操作是不可逆的,而且作為一個(gè)新手,也是盡量避免暴露配置文件的.
可以發(fā)現(xiàn)create-react-app的升級(jí)文檔也有強(qiáng)調(diào),未eject的情況下.并且也在issue里說明了,不會(huì)提供任何幫助如果你暴露出來了配置.
Note that we don't provide help for webpack questions after ejecting.
You can find webpack docs at https://webpack.js.org/.
升級(jí)操作.
備忘
-
切換分支
切換到一個(gè)新的分支去處理升級(jí)情況.
-
拷貝現(xiàn)有配置,以防萬(wàn)一.
cp package.json backup-package.json cp yarn.lock backup-yarn.lock -
替換需要的版本
找到你需要的版本的升級(jí)說明,去初始化一個(gè)新的項(xiàng)目(example).我需要的版本是1.0.0
npm install --save-dev --save-exact react-scripts@1.0.0 npm install -g create-react-app create-react-app example初始化項(xiàng)目之后,就有一個(gè)現(xiàn)成的你需要的版本了.
我們來替換一些相關(guān)的配置信息.-
config文件夾
由于我的暴露出了配置信息,所以我需要把~/my_project/config給替換成新的版本配置.
rm -rf ~/my_project/config cp -r ~/example/config/ ~/my_project/-
scripts文件夾
rm -rf ~/my_project/scripts cp -r ~/example/scripts/ ~/my_project/-
package.json
這個(gè)是npm init的產(chǎn)物.
cp ~/example/package.json ~/my_project/注意,
package.json里有一個(gè)地方需要改動(dòng),就是name,換成你的項(xiàng)目的名字.比如example => my_project. -
重新安裝.
這里就基本把項(xiàng)目配置換成了新的,那么就需要重新安裝相關(guān)的插件.
cd ~/my_project
rm -rf node_modules
npm cache clean
npm install
這里就把相關(guān)的重新安裝了,那么我們也需要把項(xiàng)目之前的第三方庫(kù)安裝上去.
我的比較簡(jiǎn)單,只有react-router-dom,antd,webpack.
- 番外
- 遇到的問題
-
Import in body of module; reorder to top import/first
我的這個(gè)錯(cuò)誤主要是css文件的問題.import A from '../A.css' import A from '../A' // A.js //改成下面這樣 import A from '../A' // A.js import A from '../A.css'ESLint的原因. 法子引入
antd
現(xiàn)在的官網(wǎng)的方式?jīng)]法子引入antd,或許是因?yàn)楸┞冻隽伺渲玫脑虬?
使用的依然是eject之后的法子.稍有變動(dòng)
-
- 遇到的問題
