# @contentstack/live-preview-utils 中文文档

规范地址：https://npmcn.com/package/%40contentstack/live-preview-utils/

版本：4\.6\.1
npm 元数据更新时间：2026-11-06T09:20:56.363Z
中文译文更新时间：2026-11-10T16:44:42.914Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40contentstack/live-preview-utils
原文对照：https://npmcn.com/package/%40contentstack/live-preview-utils/?lang=original
项目主页：https://github.com/contentstack/live-preview-sdk#readme
源码仓库：https://github.com/contentstack/live-preview-sdk

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

- 包体积（解压后）：7.9 MB，1943 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：13 个
- 首次发布：2021-10-19T19:01:02.545Z
- 最新版本发布：2026-11-06T09:20:55.945Z
- 近 30 天下载量：147279（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：57（近 12 个月 17 个）

## 中文简介

Membertack提供Live Preview SDK在各种Contentack SDKs和您网站之间建立通信通道,向预览面板发送活的更改.

## 安装

```sh
npm install @contentstack/live-preview-utils
```

也可以使用：`pnpm add @contentstack/live-preview-utils`、`yarn add @contentstack/live-preview-utils`、`bun add @contentstack/live-preview-utils`

## README

# @ contentstack/ live- preview- utils

[![npm](https://img.shields.io/npm/v/@contentstack/live-preview-utils.svg)](https://www.npmjs.com/package/@contentstack/live-preview-utils) [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://npmcn.com/package/%40contentstack/live-preview-utils/LICENSE)

这个 **现场预览 Utils** 软件包在您的网站上运行,并在页面和Contextack之间建立通信通道。 这样可以在预览面内进行现场内容更新,编辑控件,以及视觉编辑器UI.

这个SDK不是Contack交付SDK的替代品. 相反,它充当了预览和Visual Editor功能的客户端桥.

## 这个SDK运行的地方

SDK的工作跨越多个Contentack预览和编辑体验:

-   [**现场预览**](https://www.contentstack.com/docs/content-managers/author-content/about-live-preview): 在您的站点加载预览面板时预览条目 .
-   [**时间线**](https://www.contentstack.com/docs/content-managers/timeline/about-timeline): 使用相同的 Live 预览设置, 预览您网站在未来日期和计划更新的显示方式 .
-   [**视觉编辑器**](https://www.contentstack.com/docs/content-managers/visual-editor/about-visual-editor): 启用 WYSIWYG 在 Iframe 内编辑您的网站。 使用 [`mode: "builder"`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#mode) 因此,“开始编辑”针对的是视觉编辑器;当同一站点在Live Preview中打开时,SDK仍然工作.
-   [**工作室**](https://www.contentstack.com/docs/studio/about-studio): 与 Studio并用从可再用组件构建页面,绑定 CMS 数据,并实时预览更改. 它旨在与 [现场预览和视觉编辑器](https://www.contentstack.com/docs/studio/live-preview-and-visual-editing-with-studio) 在您连接的网站.

## 所需资源

-   **浏览器 :** 仅在客户端上初始化( I)`window` (必须存在)。 避免呼叫 `init` 在服务器侧渲染时.
-   **SSR对CSR:** 默认假设 SSR 行为友好。 对于 **客户端渲染**,通过 [`stackSdk`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#stacksdk) 设置 [`ssr: false`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#ssr) 如配置引用中所述.

## 安装

```bash
npm install @contentstack/live-preview-utils
```

### 从 CDN (高级) 装入

按下该版本以匹配您的应用程序( 更新) `4.6.1` 升级时:

```html
<script type="module" crossorigin="anonymous">
  import ContentstackLivePreview from "https://esm.sh/@contentstack/live-preview-utils@4.6.1";

  ContentstackLivePreview.init({
    stackDetails: {
      apiKey: "your-stack-api-key",
    },
  });
</script>
```

> \[TIP\] 如果您使用此片段初始化了 SDK, 请不要在同一页的应用程序包中再次初始化 .

## 快开始

初始化 SDK 以启用您的站点和内存之间的通信 :

```javascript
import ContentstackLivePreview from "@contentstack/live-preview-utils";

ContentstackLivePreview.init({
  stackDetails: {
    apiKey: "your-stack-api-key",
  },
});
```

见 [`init` 配置属性](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#initconfig-iconfig) 内 **[文件/实况审查-配置](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md)** 对于每一个选项,你可以通过 `init`。 。 。 .

## 配置

您可以使用下列选项配置 SDK :

-   [`enable`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#enable)
-   [`ssr`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#ssr)
-   [`mode`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#mode) (单位:千美元)`preview` 对 `builder`(中文(简体) )
-   [`editButton`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#editbutton)
-   [`editInVisualBuilderButton`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#editinvisualbuilderbutton) (在视觉编辑器外开始编辑)
-   [`overlayPropagation`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#overlaypropagation) (在盘旋/点击检测时,可进行回落以刺穿阻塞兄妹上覆)
-   [`cleanCslpOnProduction`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#cleancslponproduction)
-   [`stackDetails`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#stackdetails) (单位:千美元)[`apiKey`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#apikey), (中文(简体) ), [`environment`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#environment)(中文(简体) )
-   [`clientUrlParams`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#clienturlparams) —— 说 [纳](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#na-config) 编号 : [欧盟](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#eu-config)
-   [`stackSdk`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#stacksdk)

完整表格和实例: **[文件/实况审查-配置](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md)**。 。 。 .

### 方法和属性

-   [`onLiveEdit`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#onliveeditcallback---void): 实时编辑时触发动作
-   [`onEntryChange`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#onentrychangecallback---void): 听取条目更新
-   [`hash`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#hash): 访问预览状态标识符
-   [`setPageContext`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#setpagecontextcontext):告诉 Visual 构建器, 在当前页的哪个条目中“ 开始编辑” 使“ 开始编辑” 目标为正确的条目( 自定义- URL 页面需要)
-   [`config`](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#config): 包括运行时间上下文(例如Live Preview / Timeline预览,视觉编辑器,或独立)

这个 [配置目录](https://npmcn.com/package/%40contentstack/live-preview-utils/docs/live-preview-configs.md#contentstack-live-preview-utils-sdk-configs) 也列出 `setConfigFromParams` 财务报告和审定财务报表 `getGatsbyDataFormat` 更深入的工作流程.

## 高级: 在构建时间剥取 SDK

设定 `PURGE_PREVIEW_SDK` 或者说 `REACT_APP_PURGE_PREVIEW_SDK` 改为 `"true"` 在构建时将预览代码排除在生产捆绑之外.

**说明:** 这通过将SDK替换为生产中的轻量级活塞来减少捆绑尺寸.

## 资源

-   **资料来源:** [github.com/contentstack/live-preview-sdk (中文(简体) )](https://github.com/contentstack/live-preview-sdk)
-   **已键入 API( 本地) :** `npm run docs`

## 文献和学习

### 开发者

-   [为您的网站设置 Live 预览](https://www.contentstack.com/docs/developers/set-up-live-preview/set-up-live-preview-for-your-website)
-   [Live 预览如何工作](https://www.contentstack.com/docs/developers/set-up-live-preview/how-live-preview-works)
-   [预览 API](https://www.contentstack.com/docs/developers/set-up-timeline/preview-api)
-   [为您的网站设置时间线](https://www.contentstack.com/docs/developers/set-up-timeline/set-up-timeline-for-your-website)

### 内容管理员

-   [关于现场预览](https://www.contentstack.com/docs/content-managers/author-content/about-live-preview)
-   [跨时间线预览内容](https://www.contentstack.com/docs/content-managers/timeline/preview-content-across-a-timeline)
-   [关于视觉编辑器](https://www.contentstack.com/docs/content-managers/visual-editor/about-visual-editor)

### 工作室

-   [工作室](https://www.contentstack.com/docs/studio)
-   [从工作室开始](https://www.contentstack.com/docs/studio/get-started-with-studio)

### 学院

-   [执行现场预览(课程)](https://www.contentstack.com/academy/courses/implementing-live-preview)
-   [引擎盖下装有内存](https://www.contentstack.com/academy/content/contentstack-live-preview-under-the-hood)
-   [理解时限](https://www.contentstack.com/academy/content/understanding-timeline)
-   [理解视觉编辑器](https://www.contentstack.com/academy/content/understanding-visual-builder)

## 常见问题

### @contentstack/live-preview-utils 是什么？

Membertack提供Live Preview SDK在各种Contentack SDKs和您网站之间建立通信通道,向预览面板发送活的更改\.

### 如何安装 @contentstack/live-preview-utils？

在项目目录运行 npm install @contentstack/live-preview-utils，或使用 pnpm add / yarn add / bun add。

### @contentstack/live-preview-utils 支持 TypeScript 吗？

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

### @contentstack/live-preview-utils 支持 ESM 还是 CommonJS？

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

### @contentstack/live-preview-utils 可以商用吗？

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

### @contentstack/live-preview-utils 的下载量有多少？

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

### @contentstack/live-preview-utils 还在维护吗？

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