MDX 文件中的 import/export 用法

引言

MDX 支持在文档顶部直接使用 ES Module 的 import 和 export 语法，实现组件、变量、函数的灵活引入与导出，让文档具备更强的可复用性和动态能力。

基本用法

• 引入组件或模块

  import Demo from './Demo.jsx'
  import { Button } from 'my-ui-lib'
  

• 导出变量、函数

  export const author = '张三'
  export function getYear() { return new Date().getFullYear() }
  

典型场景

• 复用自定义组件，提升文档交互性
• 导出元数据（如作者、日期、标签）供外部系统读取
• 在文档中定义工具函数，简化表达式

示例代码

import Demo from './Demo.jsx'

export const author = '张三'
export function getYear() { return new Date().getFullYear() }

# import/export 用法示例

作者：{author}
年份：{getYear()}

<Demo message="MDX 支持模块化开发！" />

注意事项

• import 和 export 语句必须写在 MDX 文件的最顶部
• 仅支持 ES Module 语法，不支持 CommonJS（require/module.exports）
• 导出的变量/函数可在文档内直接使用，也可被外部系统读取
• 不能在 Markdown 内容或 JSX 组件内部使用 import/export

总结

MDX 的 import/export 能力让文档具备模块化和动态扩展能力，是高阶内容创作和系统集成的基础。