在 Vite/CRA 等项目中集成 MDX

一、Vite 集成 MDX 全流程

1. 创建 Vite + React 项目

npm create vite@latest my-mdx-vite -- --template react
cd my-mdx-vite
npm install

2. 安装 MDX 相关依赖

npm install @mdx-js/react @mdx-js/rollup

3. 配置 Vite 支持 MDX

编辑 vite.config.js：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import mdx from '@mdx-js/rollup';

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

4. 编写 MDX 文件和组件

• src/Hello.mdx

  # Hello, MDX in Vite
  
  <Demo message="MDX 让内容更灵活！" />
  

• src/Demo.jsx

  import React from 'react';
  export default function Demo({ message }) {
    return <div style={{ padding: '12px', background: '#f0f4fa', borderRadius: '6px', margin: '16px 0', color: '#234' }}>{message}</div>;
  }
  

5. 在 React 组件中导入并渲染 MDX

• src/App.jsx

  import React from 'react';
  import Hello from './Hello.mdx';
  import Demo from './Demo';
  function App() {
    return <Hello components={{ Demo }} />;
  }
  export default App;
  

6. 启动开发服务器

npm run dev

浏览器访问 http://localhost:5173 查看效果。

常见问题与注意事项

• 需确保 MDX 相关依赖与主框架版本兼容
• CRA 必须自定义 webpack 配置，推荐用 craco
• 组件需通过 import 或 components 属性注册
• 若遇到 MDX 语法或依赖报错，请检查依赖版本和配置

总结

Vite、CRA 等主流前端项目均可便捷集成 MDX，极大提升内容创作与开发效率。本文提供了从零到用的完整操作流程，适合初学者实践。