# @astrojs/micromark-extension-mdx-jsx 中文文档

规范地址：https://npmcn.com/package/%40astrojs/micromark-extension-mdx-jsx/

版本：1\.0\.3
npm 元数据更新时间：2025-09-18T17:31:56.093Z
中文译文更新时间：2026-11-07T01:09:59.770Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40astrojs/micromark-extension-mdx-jsx
原文对照：https://npmcn.com/package/%40astrojs/micromark-extension-mdx-jsx/?lang=original
项目主页：https://astro.build/
源码仓库：https://github.com/withastro/micromark-extension-mdx-jsx

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

- 包体积（解压后）：78.9 kB，23 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：9 个
- 首次发布：2022-06-07T21:34:26.716Z
- 最新版本发布：2022-06-07T21:34:26.980Z
- 近 30 天下载量：28368（2026-10-07 至 2026-11-05，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

较不严格版本的微分-扩展-mdx-jsx.

## 安装

```sh
npm install @astrojs/micromark-extension-mdx-jsx
```

也可以使用：`pnpm add @astrojs/micromark-extension-mdx-jsx`、`yarn add @astrojs/micromark-extension-mdx-jsx`、`bun add @astrojs/micromark-extension-mdx-jsx`

## README

# [**@astrojs/micromark-extension-mdx-jsx (英语)**](https://github.com/astrojs/micromark-extension-mdx-jsx)

此分叉基于 [微标记/微标记-扩展-mdx-jsx](https://github.com/micromark/micromark-extension-mdx-jsx) 原作者提交的来文 [Titus 虫类](https://wooorm.com/)。 。 。 .

此分叉的目的是为此提供扩展的MDX/JSX语法支持 [天体](https://github.com/withastro/astro) 网站构建工具。 如果不使用Astro,你也许应该使用原来的扩展来代替这个分叉.

## 语法差异

### 科隆斯语`:`) 前面是白空间开始属性名称而不是本地名称

最初的代码总是将JSX标记内部的结肠作为主名和当地名之间的分隔符来对待,即使结肠之前有白空间. 我们的forked版本开始一个属性名称而不是本地名称,如果在冒号之前有白空间的话.

这导致了以下变化:

-   语法 `<input :placeholder="...">` 现在被当作一种 `input` 带有属性的元素 `:placeholder`。 。 。 .
    -   原代码是这样处理的 `<input:placeholder="...">`,导致一个元素命名 `input:placeholder` (与 `placeholder` 作为元素的本地名称),并由于以下意外值分配而出现语法错误 `="..."`。 。 。 .
-   语法 `<input disabled :placeholder="...">` 现在被当作一种 `input` 有两个属性的元素 `disabled` 财务报告和审定财务报表 `:placeholder`。 。 。 .
    -   原代码是这样处理的 `<input disabled:placeholder="...">`,导致 `input` 元素中只有一个属性 `disabled:placeholder`。 。 。 .

因此,这些阿尔卑斯山大学的例子现在可以发挥预期的作用:

```md
<input type="text" :placeholder="placeholder">
<input type="text" disabled :placeholder="placeholder">
<div :class="open ? '' : 'hidden'">Test</div>
<div :style="true && { color: 'red' }">Test</div>
```

### 属性名称可以从 `@`

原始代码不允许属性名称以 `@`。 我们的forked版本允许这样做.

因此,这些例子使用了AlpineJS的简写语法 `x-on:` 现按预期工作:

```md
<button @click="handleClick">Test</button>
```

### 属性名称可以包含点 (`.`(中文(简体) )

原始代码不允许属性名称包含点. 我们的伪造版本允许这样.

因此,结合我们的变革 `@` 要开始属性名称, 这些 AlpineJS 实例现在可以按预期操作 :

```md
<button @click.once="console.log('I will only log once')">Test</button>
<input @input.debounce="fetchResults">
<input @input.debounce.500ms="fetchResults">
<div @keyup.escape.window="...">Test</div>
```

## 常见问题

### @astrojs/micromark-extension-mdx-jsx 是什么？

较不严格版本的微分-扩展-mdx-jsx\.

### 如何安装 @astrojs/micromark-extension-mdx-jsx？

在项目目录运行 npm install @astrojs/micromark-extension-mdx-jsx，或使用 pnpm add / yarn add / bun add。

### @astrojs/micromark-extension-mdx-jsx 支持 TypeScript 吗？

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

### @astrojs/micromark-extension-mdx-jsx 支持 ESM 还是 CommonJS？

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

### @astrojs/micromark-extension-mdx-jsx 可以商用吗？

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

### @astrojs/micromark-extension-mdx-jsx 的下载量有多少？

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

### @astrojs/micromark-extension-mdx-jsx 还在维护吗？

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