一、从 1.0 到 2.0
在官方文档中,有专门一页讲如何升级的,这个用户体验非常好。
一个清单列的非常清楚,内容不多,让我信心大增。并且自己之前也曽依托 umi 2.0开源过一套系统。
所以在实际操作中,升级遇到的阻力没有我想象中的那么大,但期间还是遇到了些难缠的问题,诸如页面空白,文件不存在等。
具体的改造其实就那么几步,升级和替换依赖库,更正路由配置,去除过时文件等。
改造好后,自己粗略的刷刷页面,没啥问题,然后就开心地发布到预发环境。但是在生成source map文件时,报内存栈溢出。
source map文件主要用于监控系统中的代码还原,在实际使用中用的比较少,那就先暂时关闭了。
不过在生产发布的时候,又会报没有source map文件,因为生产有个将文件搬移到指定位置的脚本,得把这个脚本也关闭。
二、从 2.0 到 3.0
为了能更好的引入TypeScript,提升项目代码质量的主动升级,根据官方给出的升级文档进行了改造。
1)router改造
原先 component 中的路径可以包含斜杠,现在不行,因为 Recommend 目录中没有默认的 index.js 文件。
{ path: '/video/recommend', exact: true, component: 'video/Recommend/', } 改成 { path: '/video/recommend', exact: true, component: 'video/Recommend', }
2)model.js验证
默认会做 model 文件的验证,但是我有个文件中包含 jsx 代码,导致无法验证通过,会报解析错误。
Dva model src/models/playViewer.js parse failed, SyntaxError: Unexpected token, expected "," (71:20)
后面就在 .umirc.js 配置文件中取消了验证,skipModelValidate 设置为 true。
export default { antd: {}, dva: { // 启用引入dva skipModelValidate: true //跳过 model 验证 }, }
3)namespace不唯一
项目构建的时候,报model的namespace重名的错误,因为 pages 子目录中的文件名都叫model.js。
pages foo/model.js bar/model.js
下面是具体的报错信息,查了框架的issue,发现还蛮多人有这问题的,但是我都升级到最新版本还是有问题。
./src/.umi/plugin-dva/dva.ts [app.model] namespace should be unique app.model({ namespace: 'model', ...ModelModel29 }); app.model({ namespace: 'model', ...ModelModel30 }); app.model({ namespace: 'model', ...ModelModel31 }); app.model({ namespace: 'model', ...ModelModel32 });
后面发现将文件改个名字,然后放到models目录中,就不会唯一了。但是有300多张页面,都得手动处理。
pages foo/ models/login.js bar/model.js
没有找到更有效更直接的方法,只能用这种笨办法了,弄了好几个小时。
中途也发现,很多页面已经废弃了,马上决定移除。
4)Link组件
之前Link组件都是从react-router-dom导入的,但现在会报错:Error: Invariant failed: You should not use <Link> outside a <Router>。
这个好弄,只要换个库就行。
- import { Link } from 'react-router-dom'; + import { Link } from 'umi';
5)警告
有个比较奇怪的警告,会一直提示,网上很多重复的帖子就是去本地 dva 库替换某条语句,还有就是升级到 2.6 版本。
Warning: Please use `require("history").createHashHistory` instead of `require("history/createHashHistory")`. Support for the latter will be removed in the next major release.
我升级到最新后,还是会有这个提示,就看源码,发现注释掉 dva/router.js 的第一句就行了,不过发到线上后,就不会有这个警告了。
require('./warnAboutDeprecatedCJSRequire.js')('router'); module.exports = require('react-router-dom'); module.exports.routerRedux = require('connected-react-router');