# @bettercms-ai/preview-runtime 中文文档
规范地址：https://npmcn.com/package/%40bettercms-ai/preview-runtime/
版本：1\.0\.0
npm 元数据更新时间：2026-11-05T14:14:32.794Z
中文译文更新时间：2026-11-08T00:55:41.279Z
软件包许可：未声明
本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。
原始 npm 页面：https://www.npmjs.com/package/%40bettercms-ai/preview-runtime
原文对照：https://npmcn.com/package/%40bettercms-ai/preview-runtime/?lang=original
## 关键信息（来自 npm 元数据）
- 包体积（解压后）：318 kB，10 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- 运行依赖：3 个
- 首次发布：2026-09-13T00:24:23.802Z
- 最新版本发布：2026-11-05T14:14:32.449Z
- 近 30 天下载量：1976（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：23（近 12 个月 23 个）
## 中文简介
0配置 BetterCMS 组件预览:为 Next.js 和 Astro app 构建预览运行时间,并在 CI 中验证组件.
## 安装
```sh
npm install @bettercms-ai/preview-runtime
```
也可以使用：`pnpm add @bettercms-ai/preview-runtime`、`yarn add @bettercms-ai/preview-runtime`、`bun add @bettercms-ai/preview-runtime`
## README
# @ bettercms-ai/ 预告运行时间
0配置组件预览 Next.js 和 Astro apps 在 BetterCMS 上的预览.
您不安装或配置此软件包 。 更好的CMS运行它给你:
- **在你的仓库的CI.** 当有人打开 **产出** 在BetterCMS仪表板的一个组件, 更好的CMS 添加 `.github/workflows/bcms-component-validation.yml` 到您的仓库( 一次) 并开始 这个 工作流程运行 `npx @bettercms-ai/preview-runtime validate`,用于构建您的应用程序预览 将元件放在每个取景口的正版浏览器中,检查一下,并报告结果.
- **在BetterCMS的托管上.** CI中构建的预览是仪表板显示的,由您自己制作 带有活性内容的代码.
除了那个工作流程文件之外, 没有其他东西被写到您的仓库中 。 路径生成到 CI 检查建筑,然后删除.
## 它需要知道的东西
哪个文件执行组件 。 写组件的代理通过BetterCMS记录 MCP 工具 `set_component_source` (例如 `src/components/sections/Hero.astro`,或 `components/Hero.tsx` 带有导出名称).
## 图标
```bash
# Build a preview runtime from an app (used by `validate`; useful when debugging locally)
bcms-preview build --manifest manifest.json --out .bcms-preview-release [--cwd path/to/app]
# Validate one component (CI only; configured by BCMS_* environment variables the workflow sets)
bcms-preview validate
```
`manifest.json`数字 :
```json
{ "components": [{ "id": "cmp_1", "source": { "path": "src/components/Hero.astro" } }] }
```
## 从页面取出段落
一个组件不必是一个独立的文件,其字段作为道具. 一节 `npx @bettercms-ai/convert --componentize` 从页面取出( 文件开始) `// @bettercms-ai/convert section v…`由该标记确认,并与其分节合同: ``所以活道具会像实例一样出现 自动复制.
## 没有文件的组件
放置在页面上的组件,或用于工程布局(导航、页脚),不需要记录文件. 名单上写着 `kind: "page"`;预览会使您的应用程序真正路线——它的循环,孩子 组件、收藏和页面样式与部署的完全相同——只保留组件本身的元素 (单位:千美元)`data-bcms-block`,否则元素会保持其字段,否则布局会 ``编号 :`