跳到主要内容

Update Docusaurus to v3

· 阅读需 2 分钟
wen

Update Docusaurus to v3​

Docuaurus v3 已经发布了， 官方提供了升级指南， 这里还是记录一下升级过程吧。😄

升级依赖​

  • docusaurus.config.js
docusaurus.config.js

-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const { themes } = require('prism-react-renderer');
+const lightTheme = themes.github;
+const darkTheme = themes.dracula;

       prism: {
-        theme: lightCodeTheme,
-        darkTheme: darkCodeTheme,
+        theme: lightTheme,
+        darkTheme: darkTheme,
       },

  • package.json
package.json
   "dependencies": {
-    "@docusaurus/core": "2.4.3",
-    "@docusaurus/preset-classic": "2.4.3",
-    "@docusaurus/theme-mermaid": "^2.4.3",
-    "@mdx-js/react": "^1.6.22",
+    "@docusaurus/core": "3.0.0",
+    "@docusaurus/preset-classic": "3.0.0",
+    "@docusaurus/theme-mermaid": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
     "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "prism-react-renderer": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.3"
+    "@docusaurus/module-type-aliases": "3.0.0",
+    "@docusaurus/types": "3.0.0"
   },


   "engines": {
-    "node": ">=16.14"
+    "node": ">=18.0"
   }

重新安装依赖​

删除 node_modules 目录和 package-lock.json 文件，然后重新安装依赖。

npm install

检查 md/mdx 文件​

  • 官方提供了工具来检查 md/mdx 文件中的 frontmatter 是否符合 MDX v3。
npx docusaurus-mdx-checker

你可能需要修改一些文件，比如我升级到 v3 后，就遇到了一个格式问题：

  • 修改前
<details><summary>xxx</summary>
...
</details>
  • 修改后
<details>
<summary>xxx</summary>
...
</details>
Loading Comments...