Node.js躬行記（17）——UmiJS版本升級

• 2022 年 4 月 6 日
• 筆記
• Node.js躬行記

　　在2020年我剛到公司的時候，公司使用的版本還是1.0，之後為了引入微前端，迫不得已被動升級。

一、從 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');