(重要)V2升级V3

官网教程基于的demo是V2版, 在逐渐添加组件过程中, 发现很多组件版本已经V3了因此, 更新版本尤为重要, 关乎到以后的开发&应用体验, 记录一下更新过程

如果你在 package.json 中, 看到了如下参数, 那你也是V2版, 奉劝一句, 趁早更新

tip

Upgrading to Docusaurus v3 requires upgrading core Docusaurus dependencies (@docusaurus/name), but also other related packages.

Docusaurus v3 now uses the following dependencies:

Node.js v18.0+
React v18.0+
MDX v3.0+
TypeScript v5.1+
prism-react-renderer v2.0+
react-live v4.0+
remark-emoji v4.0+
mermaid v10.4+

Node.js v18.0+

查询版本 node -v
windows更新使用工具gnvm管理NodeJs版本
- 先去github下载安装32位或者64位
把下载的gnvm.exe文件放在NodeJs所在的安装目录下，可通过where node查询
验证一下安装是否成功，执行gnvm version
gnvm安装成功之后，用gnvm安装NodeJS的不同版本，gnvm会管理起这些版本
1. ```
 # 注意使用管理员权限powershell
 gnvm install latest
 gnvm install 18.12.0
 gnvm update latest
```
2. 查看安装了哪些NodeJs版本 gnvm ls
3. 切换最新版本 gnvm use 18.12.0
4. 删除其他版本 gnvm uninstall 18.12.0
在Linux系统中通过包n安装升级NodeJs，步骤如下：
1. sudo npm cache clean -f
2. sudo npm install n -g
3. sudo n stable / sudo n latest / sudo n 18.12.0

React v18.0+

版本介绍: React 18 超全升级指南

pnpm install react react-dom

然后在工程目录下, 检查 package.json 中版本号, 如果不一致, 那么删除对应配置, 之后在工程目录下再次 pnpm add react react-dom

MDX v3.0+

其他升级注意事项见文档: 升级到 Docusaurus v3 | Docusaurus 中文

使用 MDX 检查器 CLI

官方提供了一个docusaurus-mdx-checker CLI，它允许轻松发现有问题的內容站点上运行此命令以获取将在 MDX v3 下无法编译的文件列表

npx docusaurus-mdx-checker

TypeScript v5.1+

中文网：https://www.tslang.cn/

官网：http://www.typescriptlang.org/

介绍

TypeScript 是由微软开发的一款开源的编程语言。
TypeScript 是 Javascript 的超集，遵循最新的 ES6、Es5 规范。TypeScript 扩展了 JavaScript 的语法。
TypeScript 更像后端 java、C# 这样的面向对象语言，可以让 js 开发大型企业项目。
谷歌也在大力支持 Typescript 的推广，谷歌的 angular2.x+ 就是基于 Typescript 语法。
最新的 Vue 、React 也可以集成 TypeScript

安装

全局安装pnpm add typescript

prism-react-renderer v2.0+

https://gitcode.com/gh_mirrors/pr/prism-react-renderer/?utm_source=artical_gitcode&index=top&type=card&webUrl&isLogin=1

介绍

Prism React Renderer 是一个用于在React应用程序中渲染高亮代码的库。它基于 Prism.js，一个流行的代码高亮库。该项目提供了一种简单的方式来将 Prism 主题集成到你的React组件中，支持自定义语言支持和各种高级特性。

主要特点

内置基本语言支持
可扩展以支持更多语言
提供多种主题
容易集成到现有React项目
包含实用工具函数以优化代码呈现

在项目中安装

yarn add --save prism-react-renderer

react-live v4.0+

pnpm add react-live

remark-emoji v4.0+

mermaid v10.4+

正式开始升级V3

删除缓存, 构建文件等内容

pnpm run clear
删除node_modules并锁定
- powershell:@('node_modules','yarn.lock','package-lock.json') | Remove-Item -Force -Recurse -ErrorAction SilentlyContinue
- shell:rm -rf node_modules yarn.lock package-lock.json
重新安装软件包并lock使用以下命令重新生成文件

pnpm install
修改 src/page/index.js 为 index.tsx

遇到的一些问题

如果遇到 package.json 文件中版本号无法修改, 且上述内容均已安装尝试无果
- 可以手动修改该文件版本号为最新版本
- 删除 node_modules 目录
- 重新使用 pnpm install 安装依赖包
无法build项目了, 但是调试正常
danger
- Client █████████████████████████ cache (99%) shutdown IdleFileCachePlugin stored
√ Server
ELIFECYCLE Command failed with exit code 3221225477. Segmentation fault
实在解决不了了, 尝试新建一个V3版demo, 新移植一下试试

经过一个多小时, 一个一个文件排除, 最终发现问题所在, 是因为tags标签存在中文, 而目前我编译的语言为英文至于日后使用中文语言编译时, tag是否能用中文不得而知了

另外keywords中也不可以使用中文, 会报一堆看不懂的错误…

Node.js v18.0+​

React v18.0+​

MDX v3.0+​

TypeScript v5.1+​

介绍​

安装​

prism-react-renderer v2.0+​

介绍​

在项目中安装​

react-live v4.0+​

remark-emoji v4.0+​

mermaid v10.4+​

正式开始升级V3​

遇到的一些问题​