创建一个remark插件以提取MDX阅读时间

本指南介绍如何创建一个remark插件，在将MDX文件作为ES模块导入时，使阅读时间数据可用。

---

Remark是一个强大的Markdown处理器，可以用来创建自定义插件以转换Markdown内容。当使用remark解析Markdown文件时，内容会被转换成抽象语法树（AST），可以通过插件进行操作。

为了提供更好的用户体验，通常会显示文章的估计阅读时间。在本指南中，我们将创建一个remark插件，从MDX文件中提取阅读时间数据，并在将MDX文件作为ES模块导入时使其可用。

开始

首先创建一个MDX文件：

# Hello, world!
​
This is an example MDX file.

假设我们使用Vite作为打包工具，并且使用官方的@mdx-js/rollup插件来转换MDX文件，因此我们可以将MDX文件作为ES模块导入。Vite的配置应该如下所示：

import { defineConfig } from 'vite';
​
export default defineConfig({
  plugins: [
    {
      // `enforce: 'pre'` 是使MDX插件生效所必需的
      enforce: 'pre',
      ...mdx({
        // ...配置
      }),
    },
  ],
});

如果我们将MDX文件作为ES模块导入，内容将是一个对象，其中default属性包含编译后的JSX。例如：

const mdx = await import('./example.mdx');
console.log(mdx