升级Create React App的项目.

96
xiaohesong
2017.09.14 13:30* 字数 864

为了实现路由按需加载,因为触及到版本的相关问题(版本详情),所以本着折腾的原则,想去尝试升级一下,也是为了以后实践项目多知道几个坑吧.

情况是这的,之前也不知道版本信息的要求,直接在电脑上开搞了.用的官方的create-react-app.

  • 升级前的相关环境

    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
  • 升级后的环境.

    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)

咋说呢,其实升级也还好,按照官方的来就好了.

但是,因为项目里使用了antd.三月份的时候,想接触学习react,就写了一个Todo并引入了ant-design.搁浅了几个月,这几天要做一个权限管理的demo. 所以现在的这个demo就按照之前的那个配置来了.那个时候是需要暴露出配置去修改.现在官方文档已经修改了.
因为eject操作是不可逆的,而且作为一个新手,也是尽量避免暴露配置文件的.

可以发现create-react-app的升级文档也有强调,未eject的情况下.并且也在issue里说明了,不会提供任何帮助如果你暴露出来了配置.

Note that we don't provide help for webpack questions after ejecting.
You can find webpack docs at https://webpack.js.org/.

升级操作.

  • 备忘

  • 切换分支

    切换到一个新的分支去处理升级情况.

  • 拷贝现有配置,以防万一.

      cp package.json backup-package.json
      cp yarn.lock backup-yarn.lock
    
  • 替换需要的版本

    找到你需要的版本的升级说明,去初始化一个新的项目(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
    

    初始化项目之后,就有一个现成的你需要的版本了.
    我们来替换一些相关的配置信息.

    • 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
      这个是npm init的产物.
      cp ~/example/package.json ~/my_project/
    

    注意,package.json里有一个地方需要改动,就是name,换成你的项目的名字.比如 example => my_project.

  • 重新安装.
    这里就基本把项目配置换成了新的,那么就需要重新安装相关的插件.

cd ~/my_project
rm -rf node_modules
npm cache clean
npm install

这里就把相关的重新安装了,那么我们也需要把项目之前的第三方库安装上去.
我的比较简单,只有react-router-dom,antd,webpack.

  • 番外
    • 遇到的问题
      • Import in body of module; reorder to top import/first
        我的这个错误主要是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
        现在的官网的方式没法子引入antd,或许是因为暴露出了配置的原因吧.
        使用的依然是eject之后的法子.稍有变动

分享一个很棒的链接 Why I love Create React App

原文链接

React
Web note ad 1