rrweb 文档
rrwebDocs

简体中文

English

简体中文

English

@rrweb/replay ​

概述 ​

本包包含回放已录制事件所需的全部代码。 更多信息请参阅指南中的回放部分。

本包负责基础回放，UI 和控件由你自行实现。 如需预构建的 UI，请查看 rrweb-player 包。

安装 ​

1) 打包器 / npm（推荐） ​

bash
npm install @rrweb/replay
js
import { Replayer } from '@rrweb/replay';
import '@rrweb/replay/dist/style.css';

2) 不使用打包器的浏览器环境（ESM） ​

直接在浏览器中加载时，使用 CDN 托管的 @rrweb/replay 浏览器资源：

html
<link
  rel="stylesheet"
  href="https://cdn.rrweb.com/replay/current/dist/style.css"
/>
<script type="module">
  import { Replayer } from 'https://cdn.rrweb.com/replay/current/dist/replay.js';
</script>

使用 current 指向最新稳定版本，或固定到精确版本（例如 https://cdn.rrweb.com/replay/2.0.0/dist/replay.js），以获得不可变的 生产环境 URL。

3) 传统的直接 <script> 引入方式（UMD 回退方案） ​

仅用于兼容非模块化环境。

html
<link
  rel="stylesheet"
  href="https://cdn.rrweb.com/replay/current/dist/style.css"
/>
<script src="https://cdn.rrweb.com/replay/current/dist/replay.umd.cjs"></script>

旧版 UMD 全局变量为 rrwebReplay。

用法 ​

js
import { Replayer } from '@rrweb/replay';
import '@rrweb/replay/dist/style.css';

const replayer = new Replayer(events, {
  // options
});
replayer.play();

注意事项 ​

目前本包实际上只是对主 rrweb 包中 Replayer 类的封装。 未来所有与 Replayer 相关的代码都将迁移到此处。

在 GitHub 上编辑 README

@rrweb/replay 发布说明 ​

2.1.1 ​

补丁变更 ​

  • 更新依赖 []：
    • rrweb@2.1.1
    • @rrweb/types@2.1.1

2.1.0 ​

补丁变更 ​

  • #1864 7f0f75f 感谢 @eoghanmurray！ - 修复回放器的 getCurrentTime() 在实时模式（liveMode）下最后一个事件用尽后“卡住”的问题

  • 更新依赖 [7f0f75f, 6fe4fed]：

    • rrweb@2.1.0
    • @rrweb/types@2.1.0

2.0.1 ​

补丁变更 ​

  • 更新依赖 [5f52d63]：
    • rrweb@2.0.1
    • @rrweb/types@2.0.1

2.0.0 ​

重大变更 ​

  • #1762 22bc4c3 感谢 @Juice10！ - 重大变更：将 UMD 全局名称从 rrweb 更名为录制器专用的 rrwebRecord 和回放器专用的 rrwebReplay。这避免了两者在同一页面同时加载时发生冲突。

  • #1497 2606a2a 感谢 @Juice10！ - 分发文件采用了新的文件名、路径和扩展名。重要提示：如果你直接引用分发文件或类型，可能需要更新你的路径/文件名，例如你从 rrweb/typings/... 或 rrdom/es 导入。但如果你是通过 import rrweb from 'rrweb' 使用，则不会察觉到此变更带来的差异。 如果你直接在 script 标签中引入 rrweb 文件，可能需要将路径更新为对应的 .umd.cjs 文件。所有 .js 文件现在都使用 ES 模块，可在现代浏览器、node.js 以及支持 ES 模块的打包器中使用。所有 npm 包现在还同时提供 .cjs 和 .umd.cjs 文件。.umd.cjs 文件是将所有文件打包在一起的 CommonJS 模块，便于向浏览器环境分发单个文件（类似于之前的 .js 文件）。.cjs 文件是可在旧版 Node.js 环境中使用的 CommonJS 模块。类型在 package.json 中有了更完善的定义，如果你需要特定类型，它们可能从新的包中导出（例如 PlayerMachineState 和 SpeedMachineState 现在从 @rrweb/replay 导出）。请查看 package.json 的 main 和 exports 字段了解可用文件。

  • #1497 2606a2a 感谢 @Juice10！ - 从 rrweb 包中移除 rrweb-all.js、rrweb-record.js 和 rrweb-replay.js 文件。现在你可以改用 @rrweb/all、@rrweb/record 和 @rrweb/replay 包。查看各包的 README 了解更多信息，或查看 PR #1033 了解具体变更。

补丁变更 ​

2.0.0-alpha.17—20 ​

仅跟随 rrweb 和 @rrweb/types 的变更发布补丁

补丁变更 ​

2.0.0-alpha.15 ​

重大变更 ​

  • #1497 2606a2a 感谢 @Juice10！ - 分发文件采用了新的文件名、路径和扩展名。重要提示：如果你直接引用分发文件或类型，可能需要更新你的路径/文件名，例如你从 rrweb/typings/... 或 rrdom/es 导入。但如果你是通过 import rrweb from 'rrweb' 使用，则不会察觉到此变更带来的差异。 如果你直接在 script 标签中引入 rrweb 文件，可能需要将路径更新为对应的 .umd.cjs 文件。所有 .js 文件现在都使用 ES 模块，可在现代浏览器、node.js 以及支持 ES 模块的打包器中使用。所有 npm 包现在还同时提供 .cjs 和 .umd.cjs 文件。.umd.cjs 文件是将所有文件打包在一起的 CommonJS 模块，便于向浏览器环境分发单个文件（类似于之前的 .js 文件）。.cjs 文件是可在旧版 Node.js 环境中使用的 CommonJS 模块。类型在 package.json 中有了更完善的定义，如果你需要特定类型，它们可能从新的包中导出（例如 PlayerMachineState 和 SpeedMachineState 现在从 @rrweb/replay 导出）。请查看 package.json 的 main 和 exports 字段了解可用文件。

  • #1497 2606a2a 感谢 @Juice10！ - 从 rrweb 包中移除 rrweb-all.js、rrweb-record.js 和 rrweb-replay.js 文件。现在你可以改用 @rrweb/all、@rrweb/record 和 @rrweb/replay 包。查看各包的 README 了解更多信息，或查看 PR #1033 了解具体变更。

补丁变更 ​