@mdx-js/loader
MDX 的 webpack 加载器。
¥webpack loader for MDX.
内容
¥Contents
¥Use
这是什么？
¥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:
npm install @mdx-js/loader
使用
¥Use
将以下内容添加到你的 webpack.config.js 中：
¥Add something along these lines to your webpack.config.js:
/** @type {import('webpack').Configuration} */
const webpackConfig = {
module: {
// …
rules: [
// …
{
test: /\.mdx?$/,
use: [
{
loader: '@mdx-js/loader',
/** @type {import('@mdx-js/loader').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 的配置方式支持 SourceMapGenerator 和 development 选项。你无法手动传递它们。
¥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:
/** @type {import('webpack').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 {import('@mdx-js/loader').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