在2020年我刚到公司的时候，公司使用的版本还是1.0，之后为了引入微前端，迫不得已被动升级。 ## 一、从 1.0 到 2.0   在官方文档中，有专门一页讲[如何升级](https://v2.umijs.org/zh/guide/migration.html)的，这个用户体验非常好。   一个清单列的非常清楚，内容不多，让我信心大增。并且自己之前也曽依托 umi 2.0开源过[一套系统](https://github.com/pwstrick/shin-admin)。   所以在实际操作中，升级遇到的阻力没有我想象中的那么大，但期间还是遇到了些难缠的问题，诸如页面空白，文件不存在等。   具体的改造其实就那么几步，升级和替换依赖库，更正路由配置，去除过时文件等。   改造好后，自己粗略的刷刷页面，没啥问题，然后就开心地发布到预发环境。但是在生成source map文件时，报内存栈溢出。   source map文件主要用于[监控系统](https://www.cnblogs.com/strick/p/14577054.html)中的代码还原，在实际使用中用的比较少，那就先暂时关闭了。   不过在生产发布的时候，又会报没有source map文件，因为生产有个将文件搬移到指定位置的脚本，得把这个脚本也关闭。 ## 二、从 2.0 到 3.0   为了能更好的引入TypeScript，提升项目代码质量的主动升级，根据官方给出的[升级文档](https://umijs.org/zh-CN/docs/upgrade-to-umi-3)进行了改造。 **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，发现还蛮多人有[这问题](https://github.com/umijs/umi/issues/4049)的，但是我都升级到最新版本还是有问题。 ~~~ ./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 outside a 。   这个好弄，只要换个库就行。  ~~~ - 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'); ~~~ ***** > 原文出处： [博客园-Node.js躬行记](https://www.cnblogs.com/strick/category/1688575.html) [知乎专栏-Node.js躬行记](https://zhuanlan.zhihu.com/pwnode) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎阅读。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。