跳至主要内容

[Docusaurus] v3 升級筆記

使用 Docusaurus 好些時間,一開始遇到 Docusaurus 更新時,都還會小心確認後再行更新。 更新多次沒遇到問題,近來遇到 Docusaurus 提示更新時,往往無腦跟著提示更新。

然後,就炸了。

本文記錄將 Docusaurus 從 v2 升級到 v3 的完整過程與遇到的問題解決方法。

升級步驟

1. 套件升級 (Package Upgrade)

直接打 npm install @docusaurus:latest ... 會有些相依套件沒有跟著更新, 造成生成失敗. 需要參考官網 Upgrading to Docusaurus v3 | Docusaurus - Upgrading Dependencies 的說明, 手動修改 package.json 中的設定升級相依套件, 方能正確執行.

npm i @docusaurus/core@latest @docusaurus/preset-classic@latest @docusaurus/theme-mermaid@latest @docusaurus/module-type-aliases@latest @docusaurus/tsconfig@latest @docusaurus/types@latest @docusaurus/faster@latest

2. MDX 語法問題解決

The object shape looks like {username: string, age: number}

Use Android version <5

You can use a generic type like Array<T>

Follow the template "Road to <YOUR_MINOR_VERSION>"

Docusaurus v3 使用 MDX v3 引擎,對於 Markdown 文件中可能會造成 MDX 誤判的 < { 有較嚴格的 lint 標準。升級後一堆文章都因為類似錯誤造成編譯失敗。

常見問題範例

解決方法:官網的 Common MDX Problems 有發生原因和處理方式。

3. 效能提升 (v3.6+)

Docusaurus 3.6 | Docusaurus Docusaurus 3.6 最大的改進就是效能的提升, 須按裝對應套件與新增設定.

npm install @docusaurus/faster

升級總結

v2 到 v3 升級遇到的問題,幾乎官網文件都有提及。耐心跟著文件修正可順利升級。

主要改進

  • 更快的編譯速度
  • 更嚴格的 MDX 語法檢查
  • 更好的效能優化

參考資源