create react app 升级小记

      很久没有更新了,最近有闲了下来,刚好又是新旧交替的时间,静下心来写一篇.

      第一:记录下自己这次的升级小节   第二:  回顾过去 总结未来.

     闲话后面说,正式进入正题吧. 公司的项目告一段落,使用ceate react app 构建,在开始的时候是1.0 的版本,等到要上线了,cra已经升级到2.0了,在上线之前要升级打包,方便后面的工作. 

    既然要升级,当然要问问升级能带来那些好处好优势.我们先看看2.0的变化.主要是亮点:

    第一是:CSS 工具支援： Sass、CSS Modules

    第二是: Babel 7、webpack 4、Jest 23

    但是每一次具体的版本更新的内容不一样,大家有兴趣可以去查看详细的文档.这里我贴出传送门

    https://github.com/facebook/create-react-app/blob/master/CHANGELOG.md
    这个链接是create-react-app的changelog,每次更新的具体内容都可以在这里查看到.非常的详细.不得不说react 团队十分的敬业啊.
    具体的升级十分的简单,直接 npm install --save --save-exact@react-scripts2.1.2版本号就行.前提是你没有eject.

然后直接npm start 项目就跑起来咯.....

这里在说一下版本号的问题.我更新的日期是1.7 这时候2.1.3其实已经发布咯(1.4发布),但是我看到更新的内容不多,日期也太近,所以选择了老一点的版本,主要是胆小求稳.

2.1.2版本更新的内容

好啦, 版本更新完成 我们进行下一步 eject

eject

因为eject 是一次性的 ,你不可能go back  吓的我赶紧commit 了一下 ,  万一坏了还能回去..

当我要进行eject 的时候碰到一个蛋疼的问题,项目已经被其他人eject 过一次了.官方文档给出的说法又是无法恢复,如果重新改动webpack 又太多.. 这个时候我尝试reset eject. 网上也没有啥例子..一篇空白..

我问了问同事说你先删除eject后的内容然后在eject..不出意外..失败.. 报错找不到eject 这个脚本..果断调试起来在全局的node run-script找到原因..下面贴出截图

node 报错

可以看到在执行run 的时候找不到对应的命令导致报错. 于是我做了如下几步:

(我知道你们不想听过程我直接写结果)

1:添加 "eject":"react-scripts eject", 然后添加需要更新的版本 "react-scripts":"2.1.2"
2.删除 node-module
3.package中清除jest.

4. 记得一定要add  commit 一下 不然会报错哦!!!!

大功告成

eject 完成之后需要重新 npm install 一下 ,因为你的包版本都更新了..美滋滋 让我们进行下一步

为此我的电脑死机了.....好刺激...webstorm 太吃内存了..

好啦,基本的工作做好了就开始使用webpack4提取一下公共的组件做点优化.

webpack 4提取公共的组件不再是之前的commonchunkplugin,已经内置使用splitChunks.具体的教程大家可以直接去官方文档去看,配置真的是太多了,在这里我贴出我使用的.

     可以看到,这里我提取了三个公共的的部分.第一个就是node_module. 第二个是公共的js(引用超过2次的全部提取出来作为一个公共的),第三个:是css 的公共提取

     本来我是想基本文件夹来提取的,后来想想还是不太适合.这块我觉得更多的是根据自己的业务, create-react-app   eject 出来之后又自己的analyze,最好是更具这个来做优化和提取.这里我们的create react app 初步的升级告一段落,如有不对,敬请谅解指正.

后面我会继续优化和大家分享...