Skip to navigation

@mdx-js/loader

MDX 的 webpack 加载器。

¥webpack loader for MDX.

内容

¥Contents

这是什么?

¥What is this?

该包是一个支持 MDX 的 webpack 加载器。

¥This package is a webpack loader to support MDX.

我什么时候应该使用这个?

¥When should I use this?

如果你使用 webpack(或使用 webpack 的其他工具,例如 Next.js 或 Rspack),此集成非常有用。

¥This integration is useful if you’re using webpack (or another tool that uses webpack, such as Next.js or Rspack).

这种集成可以与 Babel 加载器相结合,将现代 JavaScript 功能编译为用户支持的功能。

¥This integration can be combined with the Babel loader to compile modern JavaScript features to ones your users support.

如果你想评估 MDX 代码,则可以手动使用更底层的编译器 (@mdx-js/mdx)。

¥If you want to evaluate MDX code then the lower-level compiler (@mdx-js/mdx) can be used manually.

安装

¥Install

这个包是 仅限 ESM。在 Node.js(版本 16+)中,使用 npm 安装:

¥This package is ESM only. In Node.js (version 16+), install with npm:

Shell
npm install @mdx-js/loader

使用

¥Use

将以下内容添加到你的 webpack.config.js 中:

¥Add something along these lines to your webpack.config.js:

TypeScript
/**

 * @import {Options} from '@mdx-js/loader'

 * @import {Configuration} from 'webpack'
 */

/** @type {Configuration} */
const webpackConfig = {
  module: {
    // …
    rules: [
      // …
      {
        test: /\.mdx?$/,
        use: [
          {
            loader: '@mdx-js/loader',
            /** @type {Options} */
            options: {/* jsxImportSource: …, otherOptions… */}
          }
        ]
      }
    ]
  }
}

export default webpackConfig

如果你通过 ¶ Next.js¶ Vue CLI 使用 webpack,另请参阅 ¶ Next.js¶ Vue CLI 以获取更多信息。

¥See also ¶ Next.js and ¶ Vue CLI, if you’re using webpack through them, for more info.

API

该包不导出任何标识符。默认导出为 mdx

¥This package exports no identifiers. The default export is mdx.

mdx

该包导出 webpack 插件作为默认导出。配置(参见 Options)通过 webpack 单独传递。

¥This package exports a webpack plugin as the default export. Configuration (see Options) are passed separately through webpack.

Options

配置(TypeScript 类型)。

¥Configuration (TypeScript type).

选项与 CompileOptions@mdx-js/mdx 相同,但根据 Webpack 的配置方式支持 SourceMapGeneratordevelopment 选项。你无法手动传递它们。

¥Options are the same as CompileOptions from @mdx-js/mdx with the exception that the SourceMapGenerator and development options are supported based on how you configure webpack. You cannot pass them manually.

示例

¥Examples

与 Babel 结合

¥Combine with Babel

如果你使用现代 JavaScript 功能,你可能希望通过 babel-loader 使用 Babel 来编译为可在旧版浏览器中运行的代码:

¥If you use modern JavaScript features you might want to use Babel through babel-loader to compile to code that works in older browsers:

TypeScript
/**

 * @import {Options} from '@mdx-js/loader'

 * @import {Configuration} from 'webpack'
 */

/** @type {Configuration} */
const webpackConfig = {
  module: {
    // …
    rules: [
      // …
      {
        test: /\.mdx?$/,
        use: [
          // Note that Webpack runs right-to-left: `@mdx-js/loader` is used first, then
          // `babel-loader`.
          {loader: 'babel-loader', options: {}},
          {
            loader: '@mdx-js/loader',
            /** @type {Options} */
            options: {}
          }
        ]
      }
    ]
  }
}

export default webpackConfig

类型

¥Types

该包完全采用 TypeScript 类型。它导出附加类型 Options。请参阅我们网站上的 § 类型 了解信息。

¥This package is fully typed with TypeScript. It exports the additional type Options. See § Types on our website for information.

兼容性

¥Compatibility

由统一集体维护的项目与 Node.js 的维护版本兼容。

¥Projects maintained by the unified collective are compatible with maintained versions of Node.js.

当我们削减新的主要版本时,我们会放弃对未维护的 Node.js 版本的支持。这意味着我们尝试保持当前版本 @mdx-js/loader@^3 与 Node.js 16 兼容。

¥When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, @mdx-js/loader@^3, compatible with Node.js 16.

安全

¥Security

请参阅我们网站上的 § 安全 了解信息。

¥See § Security on our website for information.

贡献

¥Contribute

请参阅我们网站上的 § 贡献 了解入门方法。请参阅 § 支持 了解获取帮助的方法。

¥See § Contribute on our website for ways to get started. See § Support for ways to get help.

该项目有 行为守则。通过与此存储库、组织或社区交互,你同意遵守其条款。

¥This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

许可证

¥License

MIT © 合成器和 Vercel

¥MIT © Compositor and Vercel

MDX 中文网 - 粤ICP备13048890号