很久没有更新了,最近有闲了下来,刚好又是新旧交替的时间,静下心来写一篇.
第一:记录下自己这次的升级小节 第二: 回顾过去 总结未来.
闲话后面说,正式进入正题吧. 公司的项目告一段落,使用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发布),但是我看到更新的内容不多,日期也太近,所以选择了老一点的版本,主要是胆小求稳.
好啦, 版本更新完成 我们进行下一步 eject
因为eject 是一次性的 ,你不可能go back 吓的我赶紧commit 了一下 , 万一坏了还能回去..
当我要进行eject 的时候碰到一个蛋疼的问题,项目已经被其他人eject 过一次了.官方文档给出的说法又是无法恢复,如果重新改动webpack 又太多.. 这个时候我尝试reset eject. 网上也没有啥例子..一篇空白..
我问了问同事说你先删除eject后的内容然后在eject..不出意外..失败.. 报错找不到eject 这个脚本..果断调试起来在全局的node run-script找到原因..下面贴出截图
可以看到在执行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 初步的升级告一段落,如有不对,敬请谅解指正.
后面我会继续优化和大家分享...
