MDX 是一種將 Markdown 和 JSX 融合在一起的格式它讓你能在Markdown文檔里直接使用React等框架的組件。這為編寫交互式的技術(shù)文檔、博客和組件庫(kù)文檔帶來(lái)了全新的可能性。?? MDX 核心語(yǔ)法你可以在一個(gè).mdx文件中同時(shí)使用Markdown和JSX。Markdown 的簡(jiǎn)潔像寫普通文檔一樣使用標(biāo)題、列表、鏈接等語(yǔ)法。JSX 的強(qiáng)大通過(guò)import引入React組件并像使用HTML標(biāo)簽一樣在Markdown中使用它們。import { Button } from ./components/Button # 這是一個(gè)普通的Markdown標(biāo)題 你可以像使用HTML標(biāo)簽一樣使用這個(gè)按鈕組件 Button點(diǎn)我/Button? 關(guān)鍵特性MDX 有幾個(gè)非常實(shí)用的特性能讓你的內(nèi)容創(chuàng)作更加靈活嵌入式 JavaScript 表達(dá)式在花括號(hào){}中直接寫 JavaScript 表達(dá)式比如{1 1}或{Math.PI}。ES Module 支持使用import和export語(yǔ)句來(lái)管理依賴和數(shù)據(jù)。組件復(fù)用與組合這是 MDX 的核心優(yōu)勢(shì)。你可以把復(fù)雜的交互邏輯封裝在組件里然后在不同的 MDX 文件中反復(fù)使用真正實(shí)現(xiàn)“內(nèi)容與邏輯分離”。 常見應(yīng)用場(chǎng)景MDX 在前端開發(fā)中最常見的舞臺(tái)是構(gòu)建技術(shù)文檔站點(diǎn)和組件演示庫(kù)技術(shù)文檔/博客為文檔嵌入實(shí)時(shí)交互的Demo、代碼示例。幾個(gè)主流框架都有成熟的解決方案Next.js: 官方通過(guò)next/mdx提供了完整的支持配置后可以直接將.mdx文件當(dāng)作頁(yè)面使用。Rspress: 基于 Rspack 的靜態(tài)站點(diǎn)生成器對(duì) MDX 有天然支持適合構(gòu)建高性能文檔站。UI 組件庫(kù)文檔用 MDX 來(lái)編寫組件文檔可以一邊寫文檔一邊展示組件甚至能直接編輯代碼并預(yù)覽效果。像Docz、Storybook等工具都利用了 MDX 的這一特性讓組件庫(kù)文檔變得生動(dòng)起來(lái)。?? 以 Next.js 為例的配置以 Next.js 為例一個(gè)基礎(chǔ)的 MDX 配置通常包含以下幾步安裝依賴npminstallnext/mdx mdx-js/loader mdx-js/react types/mdx修改next.config.mjs引入next/mdx插件并將mdx添加到pageExtensions中。importcreateMDXfromnext/mdxconstnextConfig{pageExtensions:[js,jsx,md,mdx,ts,tsx],}constwithMDXcreateMDX()exportdefaultwithMDX(nextConfig)創(chuàng)建mdx-components.tsx在項(xiàng)目根目錄創(chuàng)建此文件用于定義全局的 MDX 組件如自定義的h1、img等這是 App Router 模式下必須的步驟。完成這些設(shè)置后你就可以在app目錄下創(chuàng)建.mdx文件它會(huì)自動(dòng)成為一個(gè)頁(yè)面路由。 注意事項(xiàng)使用 MDX 時(shí)有幾個(gè)細(xì)節(jié)需要注意文件后綴默認(rèn)情況下只有.mdx文件會(huì)被編譯。如果需要處理.md文件需要額外配置。Frontmatternext/mdx默認(rèn)不支持 Frontmatter文件開頭的---區(qū)域。你可以使用remark-frontmatter等插件來(lái)解析它。語(yǔ)法差異MDX 是 Markdown 和 JSX 的混合體所以一些純 Markdown 的語(yǔ)法可能不適用例如縮進(jìn)代碼塊和自動(dòng)鏈接在 MDX 中是不支持的。MDX 通過(guò)將 Markdown 的易寫性與 React 的靈活性相結(jié)合為構(gòu)建現(xiàn)代 Web 內(nèi)容提供了一種非常強(qiáng)大的模式。它讓前端開發(fā)者能夠更高效地創(chuàng)建出既內(nèi)容詳實(shí)又功能豐富的頁(yè)面。