从vuepress升级到vitepress小记

前阵子维护 XGantt 文档，去看了看 vuepress 的官网，虽然仍然在维护吧，但基本处于半停滞状态。反倒是之前说 不太一样、定位不同 的 vitepress，倒是持续更新，并且官网明确说了重点放在 vitepress 上，而且前阵子 vitepress 已经推出了正式版，不再是预览的了。这下好了，趁有时间，索性就升个级，一次性升级到位。。。

vitepress 对比 vuepress 的优势

启动快，支持内容自动更新。相比 vuepress，它启动的感受上确实快了一些，虽然都是基于 vite，但还是有一些差别，也可能是版本问题，这个没太注意。但是内容更新上来说，vitepress 确实好很多。之前 vuepress 会热更新内容，但不会热更新目录，但是 vitepress 会热更新所有内容，甚至配置文件的内容
支持更多更丰富的 md 扩展内容，比如我最喜欢的模糊高亮：
最重要的，更好看的样式。。。这个吧，纯粹个人观点，确实好看很多，样式和布局都好看很多~

两者的区别

从 vuepress 迁移至 vitepress 虽然成本不高，但是也有一些细小区别。下面是我遇到的：

首先，配置文件夹名字变了，从 .vuepress 到 .vitepress。这个吧，确实不是什么大问题，但是我自动化部署的时候确实忘了，导致多提交一次。（把 .vuepress/dist/* 的文件迁移到外面，需要改为 .vitepress/dist...）
cache 文件夹没有前缀 . 了，这个需要注意，不要忘了改 .gitignore，将其忽略。
首页文件需要从 README.md 改为 index.md。vitepress 路由会默认找 index，而不会找 README。
资源文件 public 文件夹需要在根目录下了
配置上虽然大体相同，但是有一些细微差别，比如导航和侧边栏的子字段从 children 改为 items，还有一些配置项有变化，这个可以在配置时，按照提示修改即可
vuepress 中的 <CodeGroup> 没了，改为了 ::: code-group 的容器写法

遇到的 module 问题

整体来说，迁移过程还比较流畅。我更新文档的一个重要目的就是添加代码预览功能。虽然 vuepress 也有，但最后发现了一个好用的插件 vitepress-theme-demoblock，也算是导致我升级为 vitepress 的一个重要因素吧。

按照内容升级、配置、安装插件等，然后启动项目，预览，一切顺利，也正如预想的那样，都是成功的。然后提交，自动打包，结果就会有一个：报错。。。

报了啥呢，SyntaxError: Cannot use import statement outside a module。一脸懵，我寻思也没在外面写 module 语句啊。。。再仔细看，原来是我的 XGantt 没有对应的 es 导出，我怎么想也不对，没有 es 导出，我项目中怎么可能会使用 import XGantt from '@xpyjs/gantt' 正常导出呢？看了一眼 package.json 导出也是正常的：

"main": "./dist/index.umd.js",
"module": "./dist/index.es.js",
"types": "./types/index.d.ts",

此时我并没有意识到问题所在，还看了打包配置，特意配置了 target: 'modules'，怎么也不应该报 module 的问题啊。。。

于是乎，上 stackoverflow 看看，让在 package.json 中添加 type:module，我寻思着也用不着啊。。。最关键的是，我添加了之后，打包会报错，因为需要全部改为 module 显式导入，也就是文件名需要改为 mjs，这太扯了，完全不适合我。

然后我去看了看 element-plus 的源码，突然豁然开朗。这就要说到 node 打包时的策略问题。

从13.2.0 开始，node 支持 ES modules，它首先会在包中查看有没有 type: module 字段，如果有，就按 module 操作。没有的话，看 js 文件是不是 mjs，如果是，也可以按 module 方式引入，否则就视为 commonJS。反之，在 type:module 的包中，通过 xxx.cjs 的文件名方式也可以让 node 在打包时使用 commonJS 的方式操作。

我虽然导出的是 es，但是文件名却仍然是 js，并且我也没有写明 type:module，这就导致 node 在打包时，按照默认的 commonJS 的方式打包，也就导致了上面的错误出现。

于是乎，给 XGantt 升个级，修改了 build 参数，将文件名直接改为默认的（我之前强转为了 js `<fileName: format => index.${format}.js>）。新生成的文件就很自然的成为了 index.mjs`。

更新之后，再推上去打包，一切 OK。