Gatsby中怎么使用MDX？

一、MDX 是啥？

MDX 是一种文档格式，可以在 Markdown 文档中无缝地插入 JSX 代码。

import {Chart} from './snowfall.js'
export const year = 2018

# Last year’s snowfall

In {year}, the snowfall was above average.
It was followed by a warm spring which caused
flood conditions in many of the nearby rivers.

<Chart year={year} color="#fcb32c" />

• mdx - 中文 - 官方文档

• mdx - 英文 - 官方文档

• mdx - 源码 - GitHub

---

二、Gatsby 中使用 MDX

1、安装插件

把 markdown 文件，转为gatsby 数据层节点。

# 安装插件及其依赖库
npm install gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
# 或
yarn add gatsby-source-filesystem gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react

• gatsby-source-filesystem ：把文件转换为 gatsby 的数据层节点：allFile、File。

• gatsby-plugin-mdx ：转换 allFile 节点中格式为 .mdx、