DEV Community
·
创建一个remark插件以提取MDX阅读时间
💡
原文英文，约1000词，阅读约需4分钟。
📝
内容提要
本文介绍了如何创建一个remark插件，以提取MDX文件的阅读时间数据。通过解析MDX内容并计算阅读时间，插件将数据附加到MDX内容中，使其在导入时可用。使用reading-time和mdast-util-to-string等库可以简化这一过程，并支持TypeScript以提升开发体验。
🎯
关键要点
- 本文介绍了如何创建一个remark插件，以提取MDX文件的阅读时间数据。
- 插件通过解析MDX内容并计算阅读时间，将数据附加到MDX内容中，使其在导入时可用。
- 使用reading-time库计算阅读时间，使用mdast-util-to-string库将MDX AST转换为文本。
- 创建插件时，首先提取MDX内容为文本，然后计算阅读时间，并将阅读时间数据附加到MDX内容。
- 插件支持TypeScript，增强了开发体验，允许在导入MDX文件时识别阅读时间属性。
❓
延伸问答
如何创建一个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文件的阅读时间数据，并在导入时使其可用。
➡️
