在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 等。