為了實(shí)現(xiàn)路由按需加載,因?yàn)橛|及到版本的相關(guān)問題(版本詳情),所以本著折騰的原則,想去嘗試升級(jí)一下,也是為了以后實(shí)踐項(xiàng)目多知道幾個(gè)坑吧.

情況是這的,之前也不知道版本信息的要求,直接在電腦上開搞了.用的官方的create-react-app.

• 升級(jí)前的相關(guān)環(huán)境

  1. node -v => 4.幾的忘記了
  2. npm -v => 3.幾的忘記了.
  3. webpack version => 1.14.0
  4. react-router-dom => 4.2.2
  5. react-scripts => 0.9.x

• 升級(jí)后的環(huán)境.

  1. node -v => 6.1.0
  2. npm -v => 4.6.1
  3. webpack version => 3.5.6
  4. react-router-dom => 4.2.2
  5. 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)有配置,以防萬一.

    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)目之前的第三方庫安裝上去.
我的比較簡單,只有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)

分享一個(gè)很棒的鏈接 Why I love Create React App

原文鏈接