# @cabloy/vue-compiler-sfc 中文文档

规范地址：https://npmcn.com/package/%40cabloy/vue-compiler-sfc/

版本：3\.5\.14
npm 元数据更新时间：2025-01-06T05:02:19.475Z
中文译文更新时间：2026-11-08T23:08:44.986Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40cabloy/vue-compiler-sfc
原文对照：https://npmcn.com/package/%40cabloy/vue-compiler-sfc/?lang=original
项目主页：https://github.com/vuejs/core/tree/main/packages/compiler-sfc#readme
源码仓库：https://github.com/vuejs/core

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

- 包体积（解压后）：2.6 MB，6 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：9 个
- 首次发布：2025-01-06T03:15:09.287Z
- 最新版本发布：2025-01-06T05:02:19.278Z
- 近 30 天下载量：6278（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：2（近 12 个月 0 个）

## 中文简介

@vue/编译-sfc

## 安装

```sh
npm install @cabloy/vue-compiler-sfc
```

也可以使用：`pnpm add @cabloy/vue-compiler-sfc`、`yarn add @cabloy/vue-compiler-sfc`、`bun add @cabloy/vue-compiler-sfc`

## README

# @vue/编译-sfc

> 编译 Vue 单一文件组件的较低级别工具

**注:截至3.2.13+,本套件作为主依赖物列入 `vue` 软件包,可以作为 `vue/compiler-sfc`。这意味着你不再需要明确安装此软件包并确保其版本与 `vue`''s. 只要用主线 `vue/compiler-sfc` 输入深度.**

此软件包包含更低级的公用设备, 如果您正在为一个将 Vue 单一文件组件( SFCs) 编译成 JavaScript 的捆绑器或模块系统写入插件 / 转换, 您可以使用这些工具 。 它用于 [装入器](https://github.com/vuejs/vue-loader) 财务报告和审定财务报表 [@vitejs/ plugin-vue 页面存档备份,存于互联网档案馆](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue)。 。 。 .

## API 密码

在将Vue SFCs纳入建设系统时,出于各种考虑,API是有意的低水平的:

-   脚本、模板和样式分别使用热模块替换( HMR)
    
    -   模板更新不应重设组件状态
    -   样式更新应在不重交组件的情况下进行
-   利用工具的插件系统进行预处理处理. 譬如说. `<style lang="scss">` 应当由相应的网包加载器处理.
    
-   在某些情况下,SFC中每个区块的变压器不具有相同的执行上下文. 例如,当使用时 `thread-loader` 或其他平行配置,模板子装入器在 `vue-loader` 可能无法使用完整的SFC及其描述符.
    

一般的想法是生成一个外观模块来导入组件的单个块. 诀窍是模块以不同的查询字符串自导自出,使构建系统能够作为"虚拟"模块处理每个请求:

```
                                  +--------------------+
                                  |                    |
                                  |  script transform  |
                           +----->+                    |
                           |      +--------------------+
                           |
+--------------------+     |      +--------------------+
|                    |     |      |                    |
|  facade transform  +----------->+ template transform |
|                    |     |      |                    |
+--------------------+     |      +--------------------+
                           |
                           |      +--------------------+
                           +----->+                    |
                                  |  style transform   |
                                  |                    |
                                  +--------------------+
```

外观模块是这样的:

```js
// main script
import script from '/project/foo.vue?vue&type=script'
// template compiled to render function
import { render } from '/project/foo.vue?vue&type=template&id=xxxxxx'
// css
import '/project/foo.vue?vue&type=style&index=0&id=xxxxxx'

// attach render function to script
script.render = render

// attach additional metadata
// some of these should be dev only
script.__file = 'example.vue'
script.__scopeId = 'xxxxxx'

// additional tooling-specific HMR handling code
// using __VUE_HMR_API__ global

export default script
```

### 高级别工作流程

1.  在外观变换中,用 `parse` API并基于描述符生成上述外观模块代码;
    
2.  在脚本转换中,使用 `compileScript` 用于处理脚本。 此处理功能如 `<script setup>` 和CSS可变注射. 或者,可以在外观模块中直接做到这一点(代码内嵌而不是导入),但需要重写 `export default` 到临时变量(a) `rewriteDefault` 为此提供了便利 API),因此可以附加到导出对象上.
    
3.  在模板转换中,使用 `compileTemplate` 以将原始模板编译成函数代码.
    
4.  在样式转换中,使用 `compileStyle` 来编译要处理的原始 CSS `<style scoped>`, (中文(简体) ), `<style module>` 和CSS可变注射.
    

这些API所需的选项可以通过查询字符串传递.

对于详细的API参考和选项,请检查来源类型定义. 关于这些API的实际使用,请检查 [@vitejs/ plugin-vue 页面存档备份,存于互联网档案馆](https://github.com/vitejs/vite-plugin-vue/tree/main/packages/plugin-vue) 或者说 [装入器](https://github.com/vuejs/vue-loader/tree/next)。 。 。 .

## 常见问题

### @cabloy/vue-compiler-sfc 是什么？

@vue/编译-sfc

### 如何安装 @cabloy/vue-compiler-sfc？

在项目目录运行 npm install @cabloy/vue-compiler-sfc，或使用 pnpm add / yarn add / bun add。

### @cabloy/vue-compiler-sfc 支持 TypeScript 吗？

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

### @cabloy/vue-compiler-sfc 支持 ESM 还是 CommonJS？

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

### @cabloy/vue-compiler-sfc 可以商用吗？

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

### @cabloy/vue-compiler-sfc 的下载量有多少？

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

### @cabloy/vue-compiler-sfc 还在维护吗？

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