MDX 扫盲

MDX
Markdown
En JSX
MDX IDE 插件

1 MDX 让 Markdown 步入组件时代

MDX 是一种书写格式，允许你在 Markdown 文档中无缝地插入 JSX 代码。
你可以导入（import）组件，例如交互式图表或弹框，并将它们 嵌入到内容当中。
这使得用组件编写较长的内容形成了 一场冲击 🚀。

\(^o^)/~

❤️ 强大： MDX 将 markdown 和 JSX 语法混合在一起并完美地 融入基于 JSX 的项目当中。
💻 一切皆组件： 导入（import） JSX 组件并 在 MDX 文档中直接渲染它们。
🔧 可定制： 为每一个 markdown 元素决定用哪个组件渲染。 渲染。
📚 基于 Markdown： Markdown 的简洁和优雅依然得到了保存， 只须在需要时才混入 JSX 。
🔥 超级超级快： MDX 没有运行时，所有的编译都发生在 构建阶段。

2 Webpack & MDX

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

2.1 安装

# webpack 插件
npm install --save-dev @mdx-js/loader;
# babel插件
npm install --save-dev @babel/preset-env @babel/preset-react

2.2 配置

webpack.config.js

module.exports = {
  module: {
    // ...
    rules: [
      // ...
      {
        test: /\.mdx?$/, // .md 和 .mdx 扩展名的文件定义处理程序
        // test: /\.mdx$/, // .mdx 扩展名的文件定义处理程序
        use: ['babel-loader', '@mdx-js/loader']
      }
    ]
  }
}

const images = require('remark-images')
const emoji = require('remark-emoji')
module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx?$/,// .md 和 .mdx 扩展名的文件定义处理程序
        // test: /\.mdx$/, // .mdx 扩展名的文件定义处理程序
        use: [
          {
            loader: 'babel-loader'
          },
          {
            loader: '@mdx-js/loader',
            options: { // 使用插件
              remarkPlugins: [images, emoji]
            }
          }
        ]
      }
    ]
  }
}

.babelrc

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

2.3 在浏览器中运行 MDX

module.exports = {
  node: {
    fs: 'empty' // 忽略 掉 nodejs fs 模块
  }
}

3 VSCode & MDX

VSCode 上的插件
vscode-mdx
vscode-mdx-preview