# @fluixi/template-parser 中文文档

规范地址：https://npmcn.com/package/%40fluixi/template-parser/

版本：1\.0\.0-alpha\.108
npm 元数据更新时间：2026-11-07T01:12:04.824Z
中文译文更新时间：2026-11-15T02:33:20.296Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40fluixi/template-parser
原文对照：https://npmcn.com/package/%40fluixi/template-parser/?lang=original
项目主页：https://github.com/fluixi/core#readme
源码仓库：https://github.com/fluixi/core

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

- 包体积（解压后）：255 kB，46 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：0 个
- 首次发布：2026-07-13T05:54:29.719Z
- 最新版本发布：2026-11-07T01:08:45.291Z
- 近 30 天下载量：3976（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：14（近 12 个月 14 个）

## 中文简介

html''模板的无依赖的标语和递归-后端解析器,生成一个位置可回收的AST;由编译器和TypeScript插件共享

## 安装

```sh
npm install @fluixi/template-parser
```

也可以使用：`pnpm add @fluixi/template-parser`、`yarn add @fluixi/template-parser`、`bun add @fluixi/template-parser`

## README

# @fluixi/腾讯-parser

Fluixi 的解析器 `` html`...` `` 模板:无依赖的标识符+ 生成一个 **位置, 可恢复的模板 AST**。 。 。 .

它是需要理解模板的一切的共同基础。 今天,我们.. 实值 [`@fluixi/compiler`](https://npmcn.com/package/%40fluixi/compiler) 财务报告和审定财务报表 [`@fluixi/ts-plugin`](https://npmcn.com/package/%40fluixi/ts-plugin); 要点 拆分就是他们同意一个语法,一个节点模型和一组 诊断,且一个前题或语言服务器可以稍后加入,无需秒 语法出现.

## 为什么一个单独的解析器

编译器曾将模板文本用一通直接扫描成代码源IR. 这对排放代码是罚款,但对于工具没有用处:没有源跨度,没有 诊断,没有错误恢复, 和硬接通 Babel。 这个包是 解析层分出,使每个工具都能再利用:

```
pieces → Reader (lexing + holes) → parseTemplate → Template AST
                                                      │
                    ┌─────────────────────────────────┴──────┐
               compiler (→ IR)                            TS plugin
```

解析器从不解决内部的 JavaScript `${...}`。每个孔被记录为 a 一个 **不透明槽** (指数+源跨). 下游,每个工具绑住槽 对它自己的代表:汇编器中的 Babel 节点, a `ts.Expression` 在TS系统中 插件, 格式中的原始文本 。 单接线是保持 解析器主机-不可知.

## 使用量

```ts
import { parse } from '@fluixi/template-parser';

const { root, diagnostics } = parse([
  '<button @click=',        // static segment 0
  '>',                      // hole 0 sits between segment 0 and 1
  '</button>',              // static segment 1
]); // → <button @click=${…}>${…}</button>
```

`parse(statics)` 取静态字符串片段(比 和返回 `{ root, diagnostics }`。具有真实源位置的主机 构建 `Piece[]` 直接(通过) `parseTemplate`所以,每一个跨度地图回 原始档案.

## 如何解释

标准 HTML,组件(`<Button/>`, (中文(简体) ), `<Ctx.Provider>`),碎片(`<>`, (中文(简体) ), 注释, SVG, 原始文本元素, 空白元素, 以及完整绑定的表面 :

| 语法 | 节点 |
| --- | --- |
| `name`, (中文(简体) ), `name="x"`, (中文(简体) ), `name=${x}`, (中文(简体) ), `name="a ${x} b"` | `AttributeNode` |
| `?disabled` | `AttributeNode` (布尔) |
| `.currentTime=${t}` | `PropertyBindingNode` |
| `@click=${h}` 编号 : `onClick=${h}` | `EventBindingNode` |
| `ref=${el}` | `RefBindingNode` |
| `...${props}` 编号 : `${obj}` | `SpreadNode` |
| `if=${c}` 编号 : `else` | `IfDirectiveNode` 编号 : `ElseDirectiveNode` |
| `each=${xs}` (+ 数) `key`(中文(简体) ) | `EachDirectiveNode` |
| `bind:value=${sig}` | `BindDirectiveNode` |
| `class:active=${on}` | `ClassDirectiveNode` |
| `style:color=${c}` | `StyleDirectiveNode` |
| `use=${d}` 编号 : `use:tooltip` | `UseDirectiveNode` |

## 扩展性

添加指令是指令中的新条目 **登记**永远不变 到核心解析器 :

```ts
import { CORE_DIRECTIVES, parseTemplate, type DirectiveDescriptor } from '@fluixi/template-parser';

const highlight: DirectiveDescriptor = {
  id: 'highlight',
  match: (name) => name === 'highlight',
  build: (raw) => ({ kind: 'Attribute', name: 'data-highlight', value: raw.value, boolean: false, loc: raw.loc }),
};

parseTemplate(pieces, { directives: [highlight, ...CORE_DIRECTIVES] });
```

## 诊断

解剖师从不扔 也从不拖延 它从错误的输入中恢复 解析:未关闭/不匹配/出错标签,未终止 注释、重复指令和无效约束。 每个诊断都带有 `SourceSpan`。 。 。 .

## 许可证

麻省理工学院

## 常见问题

### @fluixi/template-parser 是什么？

html''模板的无依赖的标语和递归-后端解析器,生成一个位置可回收的AST;由编译器和TypeScript插件共享

### 如何安装 @fluixi/template-parser？

在项目目录运行 npm install @fluixi/template-parser，或使用 pnpm add / yarn add / bun add。

### @fluixi/template-parser 支持 TypeScript 吗？

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

### @fluixi/template-parser 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @fluixi/template-parser 可以商用吗？

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

### @fluixi/template-parser 的下载量有多少？

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

### @fluixi/template-parser 还在维护吗？

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