mdx-bundler

<div align="center"> <h1>mdx-bundler 🦤</h1> <p>编译并打包你的MDX文件及其依赖项。速度飞快。</p> </div>

---

<!-- prettier-ignore-start -->

[![构建状态][build-badge]][build] [![代码覆盖率][coverage-badge]][coverage] [![版本][version-badge]][package] [![下载量][downloads-badge]][npmtrends] [![MIT许可证][license-badge]][license] ![所有贡献者][all-contributors-badge] [![欢迎PR][prs-badge]][prs] [![行为准则][coc-badge]][coc]

<!-- prettier-ignore-end -->

问题

你有一串MDX文本和它使用的各种TS/JS文件，你想获得这些文件的打包版本以在浏览器中执行。

解决方案

这是一个异步函数，可以编译和打包你的MDX文件及其依赖项。它使用MDX v3和esbuild，因此速度非常快，并支持TypeScript文件（作为MDX文件的依赖项）。

你的源文件可以是本地的、远程GitHub仓库中的、CMS中的，或者其他任何地方，这都无关紧要。mdx-bundler只关心你传递给它所有必要的文件和源代码，它会负责为你打包所有内容。

常见问题:

<details> <summary> <strong> "MDX有什么特别之处？" </strong> </summary>

MDX允许你将简洁的markdown语法与React组件的强大功能结合起来，用于编写内容。对于内容丰富的网站，直接用HTML编写内容可能会非常繁琐。人们经常使用所见即所得编辑器来解决这个问题，但这些编辑器在将作者的意图映射到HTML时往往不尽如人意。许多人更喜欢使用markdown来表达他们的内容源，然后将其解析成HTML进行渲染。

使用Markdown编写内容的问题在于，如果你想在内容中嵌入一些交互性，你的选择会非常有限。你要么需要插入一个JavaScript目标的元素（这种方式很间接），要么可以使用iframe之类的东西。

如前所述，MDX允许你将简洁的markdown语法与React组件的强大功能结合起来。因此，你可以导入React组件并在markdown中直接渲染它。这是两全其美的解决方案。

</details> <details> <summary> <strong> "这与<a href="https://github.com/hashicorp/next-mdx-remote"><code>next-mdx-remote</code></a>有什么不同？" </strong> </summary>

mdx-bundler实际上会打包MDX文件的依赖项。例如，以下内容无法在next-mdx-remote中工作，但在mdx-bundler中可以：

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

next-mdx-remote在处理该导入时会出错，因为它只是一个编译器，而不是打包器。mdx-bundler既是MDX编译器又是打包器。这就是区别所在。

</details> <details> <summary> <strong> "这与webpack或rollup的mdx插件有什么不同？" </strong> </summary>

那些工具旨在"构建时"运行，然后你部署文件的构建版本。这意味着如果你的MDX内容中有一个拼写错误需要修改，你必须重新构建并重新部署整个网站。这也意味着你向网站添加的每个MDX页面都会增加构建时间，所以它的扩展性并不是很好。

mdx-bundler当然可以在构建时使用，但它更强大的用途是作为运行时打包器。一个常见的用例是为你的MDX内容设置一个路由，当请求到达时，你加载MDX内容并将其交给mdx-bundler进行打包。这意味着mdx-bundler具有无限的可扩展性。无论你有多少MDX内容，你的构建时间都不会变长。此外，mdx-bundler速度相当快，但为了使这种按需打包更快，你可以使用适当的缓存头来避免不必要的重新打包。

Webpack/rollup等还要求所有MDX文件都在本地文件系统上才能工作。如果你想将MDX内容存储在单独的仓库或CMS中，你就会遇到困难，或者需要在构建时进行一些复杂操作来放置文件。

使用mdx-bundler，不管你的MDX内容来自哪里，你都可以打包任何地方的文件，你只需负责将内容加载到内存中，然后将其交给mdx-bundler进行打包。

</details> <details> <summary> <strong> "这能与Remix/Gatsby/Next/CRA等一起使用吗？" </strong> </summary>

完全可以。它可以与任何这些工具一起使用。根据你的元框架是否支持服务器端渲染，你的实现方式会有所不同。你可能决定采用构建时方法（对于Gatsby/CRA），但如前所述，mdx-bundler的真正威力体现在按需打包方面。因此，它最适合Remix/Next等SSR框架。

</details> <details> <summary> <strong> "为什么用渡渡鸟emoji？🦤" </strong> </summary>

为什么不呢？

</details> <details> <summary> <strong> "为什么esbuild是一个对等依赖？" </strong> </summary>

esbuild提供了一个用GO编写的服务，它与之交互。同一时间只能运行一个这样的服务实例，并且它必须与npm包的版本相同。如果它是一个硬依赖，你将只能使用mdx-bundler使用的esbuild版本。

</details>

目录

<!-- START doctoc generated TOC please keep comment here to allow auto update --> <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->

• 安装
• 使用
  • 选项
  • 返回值
  • 类型
  • 组件替换
  • 前置元数据和常量
  • 访问命名导出
  • 图片打包
  • 打包文件
  • 下游文件中的自定义组件
  • 已知问题
• 灵感来源
• 其他解决方案
• 问题
  • 🐛 Bug
  • 💡 功能请求
• 贡献者 ✨
• 许可证

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

安装

这个模块通过npm分发，它与node捆绑在一起，应该作为你项目的dependencies之一安装：

npm install --save mdx-bundler esbuild

mdx-bundler的一个依赖项需要一个可用的node-gyp设置才能正确安装。

使用

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

之后，你将code发送到客户端，然后：

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

最终，这将被渲染为（基本上）：

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

选项

source

MDX的string源。

如果设置了file则不能设置此项

file

磁盘上包含MDX的文件路径。你可能还需要设置cwd。

如果设置了source则不能设置此项

files

files 配置是一个包含所有要打包的文件的对象。键是文件的路径（相对于 MDX 源文件），值是文件源代码的字符串。你可以从文件系统或远程数据库获取这些内容。如果你的 MDX 不引用其他文件（或只从 node_modules 导入），则可以完全省略这个配置。

mdxOptions

这允许你修改内置的 MDX 配置（传递给 @mdx-js/esbuild）。这对于指定自己的 remarkPlugins/rehypePlugins 很有帮助。

该函数接收默认的 mdxOptions 和 frontmatter 作为参数。

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

esbuildOptions

你可以使用 esbuildOptions 选项自定义任何 esbuild 选项。这需要一个函数，该函数接收默认的 esbuild 选项和 frontmatter，并期望返回一个选项对象。

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

有关可用选项的更多信息，可以在 esbuild 文档 中找到。

建议使用此功能来配置 target 以达到你想要的输出，否则 esbuild 默认为 esnext，这意味着它不会编译任何标准化的特性，因此旧版浏览器的用户可能会遇到错误。

globals

这告诉 esbuild 某个模块是外部可用的。例如，如果你的 MDX 文件使用了 d3 库，而你的应用中已经在使用 d3 库，那么你最终会向用户发送两次 d3（一次用于你的应用，一次用于这个 MDX 组件）。这是浪费的，你最好告诉 esbuild 不要 打包 d3，然后在调用 getMDXComponent 时自己传递给组件。

全局外部配置选项： https://www.npmjs.com/package/@fal-works/esbuild-plugin-global-externals

这里有一个例子：

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

cwd

将 cwd（当前工作目录）设置为一个目录将允许 esbuild 解析导入。这个目录可以是读取 mdx 内容的目录，或者是应该在其中_运行_非磁盘 mdx 的目录。

content/pages/demo.tsx

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

src/build.ts

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

grayMatterOptions

这允许你配置 gray-matter 选项。

你的函数会接收当前的 gray-matter 配置，供你修改。返回你修改后的 gray matter 配置对象。

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

bundleDirectory & bundlePath

这允许你设置打包输出的目录和该目录的公共 URL。如果设置了其中一个选项，另一个也必须设置。

JavaScript 包不会被写入这个目录，仍然会以字符串形式从 bundleMDX 返回。

这个功能最好与 mdxOptions 和 esbuildOptions 的调整一起使用。在下面的例子中，.png 文件被写入磁盘，然后从 /file/ 提供服务。

这允许你将资产与你的 MDX 一起存储，然后让 esbuild 像处理其他内容一样处理它们。

建议每个包都有自己的 bundleDirectory，这样多个包就不会覆盖彼此的资产。

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

返回值

bundleMDX 返回一个 Promise，解析为具有以下属性的对象。

• code - 你的 mdx 的打包结果，以 string 形式。
• frontmatter - 从 gray-matter 获取的 frontmatter object。
• matter - gray-matter 返回的整个对象

类型

mdx-bundler 在其自身的包中提供完整的类型定义。

bundleMDX 有一个单一的类型参数，它是你的 frontmatter 的类型。它默认为 {[key: string]: any} 并且必须是一个对象。这然后用于为返回的 frontmatter 以及传递给 esbuildOptions 和 mdxOptions 的 frontmatter 提供类型。

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

组件替换

MDX Bundler 通过 getMDXComponent 返回的组件的 components 属性传递 MDX 替换组件的能力。

这里有一个例子，它移除了图片周围的 p 标签。

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Frontmatter 和常量

你可以在 mdx 内容中引用 frontmatter 元数据或常量。

---
title: 示例文章
---

export const exampleImage = 'https://example.com/image.jpg'

# {frontmatter.title}

访问命名导出

你可以使用 getMDXExport 而不是 getMDXComponent 来将 mdx 文件视为模块而不仅仅是一个组件。它接受与 getMDXComponent 相同的参数。

---
title: 示例文章
---

export const toc = [{depth: 1, value: '标题'}]

# 标题

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

图片打包

通过 cwd 和 remark 插件 remark-mdx-images，你可以在你的 mdx 中打包图片！

esbuild 中有两个可以用于此目的的加载器。最简单的是 dataurl，它将图片作为内联数据 URL 输出到返回的代码中。

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

file 加载器需要更多的配置才能工作。使用 file 加载器时,你的图片会被复制到输出目录,因此 esbuild 需要设置为写入文件,并且需要知道把它们放在哪里,以及在图片源中使用的文件夹的 URL。

每次调用 bundleMDX 都是相互独立的。如果你为所有内容设置相同的目录,bundleMDX 会在不警告的情况下覆盖图片。因此,每个 bundle 需要自己的输出目录。

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

打包一个文件

如果你的 MDX 文件在磁盘上,你可以通过让 mdx-bundler 为你读取文件来节省一些时间和代码。不需要提供 source 字符串,你可以将 file 设置为磁盘上 MDX 的路径。将 cwd 设置为它的文件夹,这样相对导入就能正常工作。

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

下游文件中的自定义组件

为了确保自定义组件在下游 MDX 文件中可访问,你可以使用 @mdx-js/react 中的 MDXProvider 将自定义组件传递给嵌套导入。

npm install --save @mdx-js/react

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

从那里,你将 code 发送到你的客户端,然后:

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

已知问题

Cloudflare Workers

我们非常希望这能在 cloudflare workers 中工作。不幸的是,cloudflare 有两个限制阻止了 mdx-bundler 在那个环境中工作:

1. Workers 不能运行二进制文件。bundleMDX 使用 esbuild(一个二进制文件)来打包你的 MDX 代码。
2. Workers 不能运行 eval 或类似的东西。getMDXComponent 使用 new Function 评估打包的代码。

一个解决方法是将你的 mdx-bundler 相关代码放在不同的环境中,并从 Cloudflare worker 内部调用那个环境。在我看来,这违背了使用 Cloudflare workers 的目的。另一个潜在的解决方法是在 worker 内部使用 WASM。有 esbuild-wasm,但该包存在一些问题,这些问题在该链接中有解释。然后是 wasm-jseval,但我无法让它运行 mdx-bundler 输出的代码而不出错。

如果有人愿意深入研究这个问题,那将是非常棒的,但不幸的是,我可能永远不会去研究它。

Next.JS esbuild ENOENT

esbuild 依赖 __dirname 来确定其可执行文件的位置,Next.JS 和 Webpack 有时会破坏这一点,需要手动告诉 esbuild 去哪里查找。

在 bundleMDX 之前添加以下代码将直接指向你平台的正确可执行文件。

[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

关于这个问题的更多信息可以在这篇文章中找到。

灵感

当我正在将 kentcdodds.com 重写为 remix 时,我决定想要保留我的博客文章为 MDX 格式,但我不想在构建时编译它们全部,或者每次修复一个拼写错误就必须重新部署。所以我制作了这个,它允许我的服务器按需编译。

其他解决方案

有 next-mdx-remote,但它更像是一个 mdx 编译器而不是打包器(不能为依赖项打包你的 mdx)。此外,它专注于 Next.js,而这个是与元框架无关的。

问题

想要贡献? 寻找 [Good First Issue][good-first-issue] 标签。

🐛 Bugs

请为错误、缺失的文档或意外行为提交问题。

[查看 Bugs][bugs]

💡 功能请求

请提交问题来建议新功能。通过添加 👍 来为功能请求投票。这有助于维护者确定优先处理的内容。

[查看功能请求][requests]

贡献者 ✨

感谢这些人([emoji key][emojis]):

<!-- ALL-CONTRIBUTORS-LIST:START - 请勿移除或修改此部分 --> <!-- prettier-ignore-start --> <!-- markdownlint-disable --> <table> <tbody> <tr> <td align="center"><a href="https://kentcdodds.com"><img src="https://avatars.githubusercontent.com/u/1500684?v=3?s=100" width="100px;" alt="Kent C. Dodds"/><br />_{<b>Kent C. Dodds</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=kentcdodds" title="代码">💻</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=kentcdodds" title="文档">📖</a> <a href="#infra-kentcdodds" title="基础设施（托管、构建工具等）">🚇</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=kentcdodds" title="测试">⚠️</a></td> <td align="center"><a href="https://github.com/benwis"><img src="https://avatars.githubusercontent.com/u/6953353?v=4?s=100" width="100px;" alt="benwis"/><br />_{<b>benwis</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/issues?q=author%3Abenwis" title="Bug报告">🐛</a> <a href="https://github.com/kentcdodds/mdx-bundler/pulls?q=is%3Apr+reviewed-by%3Abenwis" title="审查拉取请求">👀</a></td> <td align="center"><a href="https://www.arcath.net"><img src="https://avatars.githubusercontent.com/u/19609?v=4?s=100" width="100px;" alt="Adam Laycock"/><br />_{<b>Adam Laycock</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=Arcath" title="代码">💻</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=Arcath" title="测试">⚠️</a> <a href="#ideas-Arcath" title="想法、规划与反馈">🤔</a> <a href="https://github.com/kentcdodds/mdx-bundler/pulls?q=is%3Apr+reviewed-by%3AArcath" title="审查拉取请求">👀</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=Arcath" title="文档">📖</a></td> <td align="center"><a href="http://wooorm.com"><img src="https://avatars.githubusercontent.com/u/944406?v=4?s=100" width="100px;" alt="Titus"/><br />_<b>Titus</b></a><br /><a href="#ideas-wooorm" title="想法、规划与反馈">🤔</a> <a href="https://github.com/kentcdodds/mdx-bundler/pulls?q=is%3Apr+reviewed-by%3Awooorm" title="审查拉取请求">👀</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=wooorm" title="代码">💻</a></td> <td align="center"><a href="https://github.com/ChristianMurphy"><img src="https://avatars.githubusercontent.com/u/3107513?v=4?s=100" width="100px;" alt="Christian Murphy"/><br />_{<b>Christian Murphy</b>}</a><br /><a href="#ideas-ChristianMurphy" title="想法、规划与反馈">🤔</a></td> <td align="center"><a href="https://ped.ro"><img src="https://avatars.githubusercontent.com/u/372831?v=4?s=100" width="100px;" alt="Pedro Duarte"/><br />_{<b>Pedro Duarte</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=peduarte" title="文档">📖</a></td> <td align="center"><a href="https://keybase.io/erikras"><img src="https://avatars.githubusercontent.com/u/4396759?v=4?s=100" width="100px;" alt="Erik Rasmussen"/><br />_{<b>Erik Rasmussen</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=erikras" title="文档">📖</a></td> </tr> <tr> <td align="center"><a href="https://github.com/ozyxdev"><img src="https://avatars.githubusercontent.com/u/83309085?v=4?s=100" width="100px;" alt="Omar Syx"/><br />_{<b>Omar Syx</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/issues?q=author%3Aozyxdev" title="Bug报告">🐛</a></td> <td align="center"><a href="https://github.com/gaelhameon"><img src="https://avatars.githubusercontent.com/u/17253950?v=4?s=100" width="100px;" alt="Gaël Haméon"/><br />_{<b>Gaël Haméon</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=gaelhameon" title="文档">📖</a></td> <td align="center"><a href="https://github.com/loiacon"><img src="https://avatars.githubusercontent.com/u/32134586?v=4?s=100" width="100px;" alt="Gabriel Loiácono"/><br />_{<b>Gabriel Loiácono</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=loiacon" title="代码">💻</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=loiacon" title="测试">⚠️</a></td> <td align="center"><a href="https://skovy.dev"><img src="https://avatars.githubusercontent.com/u/5247455?v=4?s=100" width="100px;" alt="Spencer Miskoviak"/><br />_{<b>Spencer Miskoviak</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=skovy" title="文档">📖</a></td> <td align="center"><a href="https://caspertheghost.me"><img src="https://avatars.githubusercontent.com/u/53900565?v=4?s=100" width="100px;" alt="Casper"/><br />_{<b>Casper</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=Dev-CasperTheGhost" title="代码">💻</a></td> <td align="center"><a href="http://a7sc11u.dev"><img src="https://avatars.githubusercontent.com/u/803868?v=4?s=100" width="100px;" alt="Apostolos Christodoulou"/><br />_{<b>Apostolos Christodoulou</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=a7sc11u" title="文档">📖</a></td> <td align="center"><a href="https://github.com/yordis"><img src="https://avatars.githubusercontent.com/u/4237280?v=4?s=100" width="100px;" alt="Yordis Prieto"/><br />_{<b>Yordis Prieto</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=yordis" title="代码">💻</a></td> </tr> <tr> <td align="center"><a href="https://github.com/xoumi"><img src="https://avatars.githubusercontent.com/u/24864287?v=4?s=100" width="100px;" alt="xoumi"/><br />_<b>xoumi</b></a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=xoumi" title="代码">💻</a></td> <td align="center"><a href="http://yasint.dev"><img src="https://avatars.githubusercontent.com/u/25561152?v=4?s=100" width="100px;" alt="Yasin"/><br />_<b>Yasin</b></a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=yasinmiran" title="代码">💻</a></td> <td align="center"><a href="https://moweb.dev"><img src="https://avatars.githubusercontent.com/u/22095656?v=4?s=100" width="100px;" alt="Mohammed 'Mo' Mulazada"/><br />_{<b>Mohammed 'Mo' Mulazada</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=moniac" title="文档">📖</a></td> <td align="center"><a href="https://www.canrau.com"><img src="https://avatars.githubusercontent.com/u/5196971?v=4?s=100" width="100px;" alt="Can Rau"/><br />_{<b>Can Rau</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=CanRau" title="文档">📖</a></td> <td align="center"><a href="http://hosenur.dev"><img src="https://avatars.githubusercontent.com/u/50978981?v=4?s=100" width="100px;" alt="Hosenur Rahaman"/><br />_{<b>Hosenur Rahaman</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=HOSENUR" title="文档">📖</a></td> <td align="center"><a href="https://macieksitkowski.com"><img src="https://avatars.githubusercontent.com/u/58401630?v=4?s=100" width="100px;" alt="Maciek Sitkowski"/><br />_{<b>Maciek Sitkowski</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=sitek94" title="文档">📖</a></td> <td align="center"><a href="https://github.com/priyang12"><img src="https://avatars.githubusercontent.com/u/72823974?v=4?s=100" width="100px;" alt="Priyang"/><br />_{<b>Priyang</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=priyang12" title="代码">💻</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=priyang12" title="文档">📖</a></td> </tr> <tr> <td align="center"><a href="https://github.com/theMosaad"><img src="https://avatars.githubusercontent.com/u/48773133?v=4?s=100" width="100px;" alt="Mosaad"/><br />_{<b>Mosaad</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=theMosaad" title="文档">📖</a></td> <td align="center"><a href="https://github.com/stefanprobst"><img src="https://avatars.githubusercontent.com/u/20753323?v=4?s=100" width="100px;" alt="stefanprobst"/><br />_{<b>stefanprobst</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=stefanprobst" title="代码">💻</a> <a href="https://github.com/kentcdodds/mdx-bundler/commits?author=stefanprobst" title="测试">⚠️</a></td> <td align="center"><a href="https://vladmoroz.com"><img src="https://avatars.githubusercontent.com/u/8441036?v=4?s=100" width="100px;" alt="Vlad Moroz"/><br />_{<b>Vlad Moroz</b>}</a><br /><a href="https://github.com/kentcdodds/mdx-bundler/commits?author=vladmoroz" title="代码">💻</a></td> </tr> </tbody> </table> 本项目遵循 [all-contributors] 规范。 欢迎任何形式的贡献！

许可证

MIT