# @ecopages/mdx 中文文档

规范地址：https://npmcn.com/package/%40ecopages/mdx/

版本：0\.7\.1
npm 元数据更新时间：2026-11-12T23:40:44.021Z
中文译文更新时间：2026-11-13T06:10:53.945Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40ecopages/mdx
原文对照：https://npmcn.com/package/%40ecopages/mdx/?lang=original
源码仓库：https://github.com/ecopages/ecopages

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：30.9 kB，22 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：^24\.22\.0 \|\| \>=26\.0\.0
- 运行依赖：4 个
- peer 依赖：@mdx-js/mdx ^3\.1\.0，@ecopages/core 0\.7\.1
- 首次发布：2026-03-08T20:18:57.281Z
- 最新版本发布：2026-11-12T23:40:43.597Z
- 近 30 天下载量：3635（2026-10-13 至 2026-11-11，npm 官方下载统计）
- 已发布版本数：124（近 12 个月 124 个）

## 中文简介

Ecopage 的 MDX 插件

## 安装

```sh
npm install @ecopages/mdx
```

也可以使用：`pnpm add @ecopages/mdx`、`yarn add @ecopages/mdx`、`bun add @ecopages/mdx`

## README

# @ ecopages/ mdx (英语)

Ecopages第三方JSX运行时间(例如: `@kitajs/html`) (中文(简体) ). 对于React或Ecopages JSX MDX,取而代之的是自有的集成插件.

## 选择您的 MDX 路径

| 运行时间 | 插件 |
| --- | --- |
| 反应 | `reactPlugin({ mdx: {} })` |
| 生态网页 | `ecopagesJsxPlugin({ mdx: {} })` |
| 第三方 | `mdxPlugin({ compilerOptions: { jsxImportSource: '...' } })` |

## 安装

```bash
bun add @ecopages/mdx @mdx-js/mdx @kitajs/html
```

`@mdx-js/mdx` 是同级依赖。 安装您设置的 JSX 运行时间 `compilerOptions.jsxImportSource`。 。 。 .

## 使用量

```ts
import { defineConfig } from '@ecopages/core/config';
import { mdxPlugin } from '@ecopages/mdx';

export default defineConfig({
    integrations: [
        mdxPlugin({
            compilerOptions: {
                jsxImportSource: '@kitajs/html',
            },
        }),
    ],
});
```

`compilerOptions.jsxImportSource` 实值 **所需经费**。 。 。 . `react` 财务报告和审定财务报表 `@ecopages/jsx` 被拒绝——使用 `reactPlugin` 或者说 `ecopagesJsxPlugin` 对于那些跑步时间.

MDX使用核心的共享路由渲染器. 它的页面模块正常化和页面浏览器Graph依赖性通过集成钩厂提供;编译器选项被MDX构建插件所消耗.

## 类型

```ts
import type { JsxImportSource, KnownJsxImportSource, StandaloneMdxCompilerOptions } from '@ecopages/mdx';
```

`KnownJsxImportSource` 实值 `'@kitajs/html' | 'react' | '@ecopages/jsx'`。 。 。 . `JsxImportSource` 还接受自定义运行时字符串.

何处 `remarkPlugins`, (中文(简体) ), `rehypePlugins`,以及 `recmaPlugins` 访问取决于插件 :

-   独立 `mdxPlugin()` 带他们进去 `compilerOptions`旁边 `jsxImportSource`。它没有顶级插件列表.
-   `reactPlugin({ mdx })` 财务报告和审定财务报表 `ecopagesJsxPlugin({ mdx })` 把他们带到顶端 `mdx`旁边 `compilerOptions`,不要在内部接受 `compilerOptions`。两者都使用共享 `MdxCompilerOptionsInput` 导出自 `@ecopages/mdx/core`。 。 。 .

## 反应 MDX

不要单独使用 `mdxPlugin()` 用于反应应用程序 :

```ts
import { reactPlugin } from '@ecopages/react';

reactPlugin({
    mdx: {},
});
```

提供 `mdx` 对象启用 MDX; 省略以禁用 MDX。 插件列表属于顶端 `compilerOptions`数字 :

```ts
import remarkGfm from 'remark-gfm';

reactPlugin({
    mdx: {
        compilerOptions: { format: 'mdx' },
        remarkPlugins: [remarkGfm],
    },
});
```

React MDX 加载器从文件过滤器中获取 `mdx.extensions`,替换 `compilerOptions.mdxExtensions` 而不是与它们合并。 声明自定义扩展名, 如 `['.react.mdx']` 仅指那些使用 React- plain 编译的文件 `.mdx` 在同一块中的文件保留在拥有其的整合中。 React所编译的 MDX 条目是 React 组件,必须通过 React 拥有的路由提供;参见 `@ecopages/content-processor` 内容输入所有权合同.

## MDX中的依赖性发现

核心的MDX加载器插件在所有集成的MDX文件中自动发现顶级组件和样式表导入. `projectRoot` 需要并且来自应用程序配置( )`rootDir`如果缺少的话,装填器会扔出.

-   **当地构成部分**:当地最高级进口 `eco.component()` 将声明添加到 `config.dependencies.components`。 。 。 .
-   **样式表**:相对和TSfig-异名的CSS进口(例如:. `import './post.css';` 或者说 `import '@/styles/post.css';`)被从编译的JavaScript中剥去. 发现的路径在收集之前会保留在组件身份上;它们不会被复制到 `config.dependencies.stylesheets`明确 `dependencies.stylesheets` 条目仍然对属性具有权威性,例如 `media`。 。 。 .
-   **代码块和函数**: 含有进口说明和功能内动态进口的Markdown编码块与高层无害环境管理申报区分开来,保持不变.
-   **配置合成**: 每个编译的 MDX 模块都与 `bindComponentIdentity` 财务报告和审定财务报表 `attachDiscoveredDependencies`如果 `export const config = { ... }` 已存在, 已发现组件与显性组件合并 。 独立渲染器保留了已存在的页面配置 `id` 财务报告和审定财务报表 `integration`,将当前页面文件路径附后,并将导入的 MDX 版式传递到依赖性收藏中,其身份完整.
-   **原始地图**数字 : `createMdxLoaderPlugin()` 以组件身份编辑编译器地图,并将结果返回到构建适配器。 设定 `includeSourceMap: false` 在其选项中省略地图.

## 常见问题

### @ecopages/mdx 是什么？

Ecopage 的 MDX 插件

### 如何安装 @ecopages/mdx？

在项目目录运行 npm install @ecopages/mdx，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@mdx-js/mdx（^3\.1\.0）、@ecopages/core（0\.7\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @ecopages/mdx 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @ecopages/mdx 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @ecopages/mdx 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js ^24\.22\.0 \|\| \>=26\.0\.0。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @ecopages/mdx 可以商用吗？

@ecopages/mdx 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @ecopages/mdx 的下载量有多少？

根据 npm 官方下载统计，@ecopages/mdx 在 2026/10/13 – 2026/11/11 这 30 天内被下载 3,635 次，日均约 121 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @ecopages/mdx 还在维护吗？

最新版本 0\.7\.1 发布于 2026/11/13（今天）；至今共发布 124 个版本，其中过去 12 个月发布了 124 个；首次发布于 2026/03/09。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。