创建一个remark插件以提取MDX阅读时间
内容提要
本文介绍了如何创建一个remark插件，以提取MDX文件的阅读时间数据。通过解析MDX内容并计算阅读时间，插件将数据附加到MDX内容中，使其在导入时可用。使用reading-time和mdast-util-to-string等库可以简化这一过程，并支持TypeScript以提升开发体验。
延伸解读
插件如何将阅读时间注入 MDX 模块
文章通过向 MDX AST 的 children 数组前插入一个 mdxjsEsm 节点，并利用 estree-util-value-to-estree 将阅读时间对象转换为 ESTree 表达式，从而在编译后的 ES 模块中导出名为 readingTime 的常量。这种方式不依赖 frontmatter，而是直接生成 ESM 导出，使得导入 MDX 文件时即可访问该数据。
依赖库的分工与 TypeScript 类型增强
实现中使用了三个核心库：reading-time 负责根据文本计算阅读时间，mdast-util-to-string 将 AST 转为纯文本，estree-util-value-to-estree 把数据转为 ESTree 节点。对于 TypeScript 用户，还需安装 @types/mdast 和 unified 以获得类型定义，并通过模块扩充声明 *.mdx 文件中的 readingTime 属性，从而在导入时获得类型提示。
与 Vite 和 MDX 插件的集成要点
文章假设使用 Vite 作为打包工具，并配合 @mdx-js/rollup 插件转换 MDX 文件。配置中需要设置 enforce: 'pre' 以确保 MDX 插件在其它插件之前执行。导入 MDX 文件时，默认导出是编译后的 JSX 组件，而插件添加的 readingTime 会作为额外的命名导出出现，方便在组件中直接使用。
Q&A
如何创建一个remark插件来提取MDX文件的阅读时间？
创建remark插件的步骤包括提取MDX内容为文本、计算阅读时间，并将阅读时间数据附加到MDX内容中。
使用哪些库可以简化MDX阅读时间的计算？
可以使用reading-time库计算阅读时间，使用mdast-util-to-string库将MDX AST转换为文本。
如何在TypeScript中增强MDX类型定义以支持阅读时间？
可以通过声明模块并导入reading-time的类型定义来增强MDX类型定义，使TypeScript识别readingTime属性。
MDX文件导入时，如何访问阅读时间数据？
导入MDX文件后，可以通过readingTime属性访问阅读时间数据，例如：import { readingTime } from './example.mdx';。
创建remark插件时，如何处理MDX内容的AST？
在创建remark插件时，可以使用mdast-util-to-string将MDX AST转换为文本，然后进行阅读时间计算。
这个remark插件的主要功能是什么？
这个remark插件的主要功能是提取MDX文件的阅读时间数据，并在导入时使其可用。
