umi如何使用mdx

[kevinkan000]

有详细的umi使用mdx的配置相关教程吗

[fz6m]

  pnpm add -D @mdx-js/loader

// 项目根目录下创建一个 plugin.ts 文件

import { type IApi } from 'umi'

export default (api: IApi) => {
  api.modifyConfig(async (memo) => {
    const remarkGfm = (await import('remark-gfm')).default

    memo.mdx = {
      loader: '@mdx-js/loader',
      loaderOptions: {
        remarkPlugins: [remarkGfm],
      },
    }
    return memo
  })
}

// index.tsx

import MdxComponent from './path/to/file.mdx'

// ...

<MdxComponent />

// src/global.d.ts

declare module '*.mdx' {
  let MDXComponent: (props: any) => JSX.Element
  export default MDXComponent
}

关于更多配置详见 mdx 官网。