Vite + React项目中预编译指定MDX文件并通过虚拟模块导出的实现问题

看起来你已经找对了方向——Vite的虚拟模块确实是解决这个需求的完美方案，不过你的代码里有几个关键问题需要调整，尤其是异步逻辑处理和虚拟模块的导出写法，我来一步步帮你梳理清楚：

首先修正你的核心错误 #

1. 异步过滤完全失效：你在Array.filter里用了async回调，但filter是同步方法，async函数会返回一个Promise，而所有Promise在布尔判断里都会被视为true，导致你的过滤逻辑根本没起作用。
2. 用evaluate导致组件无法序列化：evaluate是MDX的运行时执行方法，会直接生成React组件实例，这类函数/对象无法通过JSON.stringify序列化，所以不能直接导出。我们需要的是编译MDX为JS代码字符串，而非直接执行它。

完整的Vite虚拟模块实现方案 #

下面是调整后的完整插件代码，我会逐段解释：

import fs from "fs";
import path from "path";
import fm from "front-matter";
import { compile } from "@mdx-js/mdx";
import remarkFrontmatter from "remark-frontmatter";
import remarkMdxFrontmatter from "remark-mdx-frontmatter";

export default function mdxPostsPlugin() {
  // 用绝对路径避免相对路径陷阱
  const postsDir = path.resolve(process.cwd(), "./src/posts");

  return {
    name: "vite-plugin-mdx-posts", // 插件名称，Vite会用它来标识插件

    // 解析虚拟模块ID
    resolveId(id) {
      if (id === "virtual:mdx-posts") {
        // 给虚拟模块加\0前缀，避免和真实文件冲突
        return "\0virtual:mdx-posts";
      }
    },

    // 加载虚拟模块内容
    async load(id) {
      if (id !== "\0virtual:mdx-posts") return;

      // 1. 读取posts目录下所有MDX文件
      const fileNames = fs
        .readdirSync(postsDir)
        .filter(file => file.endsWith(".mdx")); // 只处理MDX文件

      // 2. 解析frontmatter并过滤需要保留的文章
      const validPosts = await Promise.all(
        fileNames.map(async (fileName) => {
          const filePath = path.join(postsDir, fileName);
          const fileContent = fs.readFileSync(filePath, "utf8");
          // 解析frontmatter和MDX内容
          const { attributes: frontmatter, body } = fm(fileContent);

          // 这里写你的过滤逻辑，比如只保留已发布的文章
          if (!frontmatter.published) return null;

          // 3. 编译MDX为React组件的JS代码
          const compiledCode = await compile(body, {
            remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
            outputFormat: "function-body", // 只输出组件函数体，方便我们包装
          });

          return {
            frontmatter,
            componentCode: String(compiledCode),
          };
        })
      ).then(posts => posts.filter(Boolean)); // 过滤掉被排除的文章

      // 4. 构建虚拟模块的JS代码内容
      return `
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Fragment as _Fragment } from "react";

// 导出处理好的文章数组
export const posts = [
  ${validPosts.map(post => `
    {
      frontmatter: ${JSON.stringify(post.frontmatter)},
      // 把编译后的MDX代码包装成React组件
      component: function MDXContent(props) {
        ${post.componentCode}
      }
    }
  `).join(",")}
];
      `.trim();
    },
  };
}

怎么在项目里用这个插件？ #

1. 注册插件到Vite配置：
   在vite.config.js里导入并注册这个插件：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import mdxPostsPlugin from "./path-to-your-plugin-file"; // 替换成你的插件文件路径

export default defineConfig({
  plugins: [react(), mdxPostsPlugin()],
});

2. 在React组件里导入使用：
   现在你可以直接在任何组件里导入虚拟模块的内容，直接渲染预编译好的MDX组件：

import { posts } from "virtual:mdx-posts";

export default function PostsPage() {
  return (
    <div className="posts-container">
      {posts.map((post, index) => (
        <article key={index} className="post-card">
          <h2>{post.frontmatter.title}</h2>
          <p className="post-date">{post.frontmatter.date}</p>
          {/* 直接渲染预编译好的MDX组件 */}
          <post.component />
        </article>
      ))}
    </div>
  );
}

关键细节说明 #

• 为什么用compile而非evaluate：compile会把MDX转成标准的React组件JS代码字符串，我们可以把这段代码直接嵌入虚拟模块，避免了运行时编译的开销，也解决了序列化问题。
• 虚拟模块的ID规则：Vite要求虚拟模块ID以\0开头，用来区分真实文件和虚拟模块，避免路径解析冲突。
• JSX Runtime依赖：MDX编译后的代码依赖React的JSX runtime，所以我们在虚拟模块里提前导入了这些依赖，确保组件能正常运行。

这样调整后，你的需求就完全满足了：

• 构建前自动处理所有MDX文件
• 基于frontmatter过滤不需要的文件（不会出现在最终构建产物里）
• 预编译MDX为React组件，客户端直接渲染，零运行时编译开销

内容来源于stack exchange