Webpack

MDX 提供了内置的 webpack 加载器，你需要为 webpack 项目安装并配置 此加载器。

安装

npm install --save-dev @mdx-js/loader

配置

该加载器（loader）需要与 babel-loader 一起使用。如果你使用了 JSX 语法，那么大多数项目 通常都已经包含了此功能。

对于 webpack 项目，你可以在 webpack.config.js 文件中为 .md 和 .mdx 扩展名的文件定义处理程序。

module.exports = {
  module: {
    // ...
    rules: [
      // ...
      {
        test: /\.mdx?$/,
        use: ['babel-loader', '@mdx-js/loader']
      }
    ]
  }
}

如果你希望此加载器只处理 .mdx 文件的话，则可以将正则表达式修改为 /\.mdx$/。

The transpiled output for MDX 依赖 babel 进行转换并输出。这通常是 通过添加 babel-loader 并在 MDX 加载器（loader） 之后 运行。Webpack 从加载器（loaders）数组的最后一个开始调用，因此 遵循上述顺序很重要。

使用插件

如果你想配置 插件 ，你可以 将其作为 options 参数传递给加载器。

const images = require('remark-images')
const emoji = require('remark-emoji')
module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx?$/,
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: '@mdx-js/loader',
            options: {
              remarkPlugins: [images, emoji]
            }
          }
        ]
      }
    ]
  }
}

在浏览器中运行 MDX

如果你在浏览器中运行 MDX，则需要配置 webpack 忽略 掉 fs 模块:

module.exports = {
  node: {
    fs: 'empty'
  }
}

查看 webpack 文档

Babel 配置

你还需要配置 babel 才能支持 MDX 所支持的语言特性。 实现这一目标的方法是将包含以下内容的 .babelrc 文件放到 项目的根目录下。

{
  "presets": ["@babel/env", "@babel/react"]
}

然后安装依赖项：

npm install --save-dev @babel/preset-env @babel/preset-react