本次升级基础包情况：react 15.6 -> 16.6，babel 6.6 -> 7.1。升级流程：
- 升级React
- 功能测试
- 升级Babel
- 功能测试
OK，下面我要开始升级工作了。
先新拉一个分支，不然改出毛病了就gg了：
Good，没问题。
React 15 到 React 16
用npm-check检测一下，用-u参数进行交互式UI展示。
npm-check是一款可以在命令行通过图形化界面进行检测paceage.json文件的包有没有版本更新情况的插件，通过使用npm-check不仅能够节省时间效率，还能直观的选择特定需要升级的包，另外它还会提供包地址、具体版本信息、当前版本信息等等，是一款不可多得npm效率工具（。
Good，按上下键选择react，按一下空格选择，按enter就开始安装了。安装过程略了。
安装完成后我可以看到package.json文件也更新了，现在的react是16版本的了：
Good，下面我运行dev跑起来，出意外的话就不会报错了。
激动ing...
果然没出意外。下面我看一下具体输出。
上面说，这些dependencies没有找到，然后列了很多路径。一大堆英文看着头疼，不过我还是找到了一个关键字眼：react-dom
在来看看我的dom版本：
居然是15版本的，难道是版本不兼容导致的吗，太令人匪思所夷了，不管怎样，我还是升级dom试一下吧。
npm-check -u
选择dom，然后按enter。
开始安装了。
安装完成啦！
让我再次运行npm run dev命令：
开始构建了，静静等候奇迹的出现吧。
Good，运行起来了，下面再去进行一下功能测试。
一打开首页，果然控制台出错了：
在项目里进行全局搜索，貌似是这句话报了错：
PropTypes是引用的prop-types包，我去检查一下这个包的版本：
15版本的，我要升级一下这个了。
最新的居然是15.6的，希望可以跑起来。
构建完了，再去看看浏览器。
一打开首页，还是有这个错误。
在stof（stackoverflow）上找到了一个说可能是eslint的原因，我升级一下我的eslint：3.19 -》 5.9
【并没有什么用】
来看看VS提示
我安装了@types/prop-types试一下（在袋鼠云EasyManager使用ts重构后对ts了解更多，后来确认与这个问题无关，想知道更过关于袋鼠云在ts上的实践的话欢迎大家关注我们的各种官方账号哦）
【并没有什么用】（先下班吧..）
【新的一天开始啦！】
这一周我要把react升级好，希望一切顺利（这一句划掉）。
好的，下面让我继续上面的proptypes的问题。删掉node_modules文件夹重新安装然后运行项目。
！！！
居然没问题！！！？？？怎么会这样？？！！难道是install成旧版本了吗！！！检查package.json：
不是啊！！天呐！不会是package.json文件乱套了吧！！难道我在dev环境推上去的也是16版本的吗？？！！我先切换分支检查一下：
谢天谢地并没有。
那我在切换回去，我不相信这个问题莫名其妙的就没有了。我要先检查一下react的包到底是什么版本的。
看了react的包的package.json文件，的确是16版本的。那么proptypes问题是怎样消失不见的呢？
我决定逆反一下上周做的步骤。
首先卸载@types/prop-types。
发现问题了，，，是页面进错了导致没有运行使用proptypes相关代码才没报错...（脸红
下面我就可以正式开始解决这个问题了。温习一遍这个错误：
使用了oneOfType的只有一个index.js文件里：
而这个PropTypes是引自
，根据react16官方的文档在15.5版本就需要使用prop-types使用proptype对象：
其官方的示例也跟我项目的代码一致：
那么就应该不是自己项目业务代码的问题了，我点击控制台报错代码定位过去：
是这句话，然后在node_modules文件夹里找一下啥包用了这个：
原来是react-style-proptype用到了，在全局找一下看看哪里使用了这个包：
原来是react-split-pane包用到了react-style-proptype的2.0.2版本，最新的react-style-proptype是3.x版本
split-pane是0.x版本：
那么我升级一下split-pane吧：
升级结束后split-pane引用了react-style-proptype的3.0.0版本，在react-style-proptype包下的index文件可以看到其使用React.PropTypes变成了单独的PropType对象:
那么我的程序可以正常跑了吗？
并不可以：
我用同样的方法定位代码查看proptype使用是不是有问题：
（被any挡住的是string），仍然是split-pane报的错，怎么会这样呢？看起来代码有点不一样，难道是没有重新run的缘故吗，我重新run一下。
果然没错，split-pane不报错了，但是项目的代码报了错：
那我就全局搜索一下哪里是用这种方式的然后统一替换掉吧！
成功运行啦！
下面我进行一下功能测试，数栈是一个集很多应用与一体的应用，本着人人参与效率高的原则我做一下基本的功能测试，具体使用细节在开发环境再到测试环境进行层层使用验证。
经过测试没有发现致命问题，那么本次react升级就完成啦！下面我升级一下babel吧！
Babel 6 到 Babel 7
当前babel版本：
babel-core从7版本开始就不再是以前的babel-core包了，取而代之的是更莫名其妙的babel/core包：
下面我安装这个包。装好之后编译都报了错：
emmm.....这可咋办。。。
在我升级好babel7配套的包之后：
并且修改了babel的配置文件之后：
，下面就可以run一下啦！但是报了错：
从官网的upgrade to babel 7可以知道：
我应该使用env替换掉上面那些玩意，修改之后重新run一下的我报错信息是这个：
看到他们已经移除了babel's Stage presets（具体说明在Removing Babel's Stage Presets，他们之前在推上征集过投票），那我岂不是不可以用preset-stage-0了。不管如何我决定去上面的url看一下。
注释掉@babel/preset-stage-0之后，我重新run一下变成了
根据谷歌翻译我知道他跟我说这个适用于babel6的，好的，那我更新到最新的@babel/plugin-proposal-decorators，在使用的时候配置legacy为true：
重新run一下，报了
错误，报错信息中有个提示为
，我决定安装这个包再试一下。
重新run起来有报错了，我继续安装并使用一下它提示的包@babel/plugin-proposal-class-properties.
居然没报错！！！我的天！！！
我要去测试一下！！！
（测试ing............）
运行起来了！！！我的天！！！！我要去具体应用下测试一下！！！
没问题！！！
这次袋鼠云数栈基础包升级到此结束啦！下一步就是在开发环境和测试环境进行详细的功能点测试。这次升级过程还是很顺利的，之前升级过袋鼠云用户中心的依赖包所以这次没那么害怕，纵观整个过程可以发现走了弯路的，最严重的就是定位PropType.oneOfType错误位置问题，以为是业务代码的问题，再三确认代码没问题才发现是别的依赖包使用了旧的方式导致错误。通过本次升级可以看见PropType在很多第三方包中使用也很重要，对于类型的定义规则其实使用TypeScript的话会更好，ts不论在编码风格还是类型约束上都让人很舒服，想知道袋鼠云在ts上的实践欢迎关注袋鼠云的各种官方账号哦；）
4448
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
