Skip to content

@rrweb/all ​

概述 ​

便捷包,包含一组 rrweb 包的合集。

在大多数生产环境中,录制器和回放器会部署到不同的页面/应用。请在被录制的页面使用 @rrweb/record,在回放页面使用 @rrweb/replay(或使用 rrweb-player 以包含 UI)。

使用场景包选择
大多数新应用(显式声明录制/回放依赖)@rrweb/record + @rrweb/replay
通过一个导入获得录制、回放和 packer@rrweb/all

当你确实希望使用一个包来图方便时(例如演示、工具或简化的搭建),请使用 @rrweb/all;已弃用的 rrweb 包也曾提供类似的一体化用途。

包含以下包:

安装 ​

1) 打包器 / npm ​

bash
npm install @rrweb/all
js
import { record, Replayer, pack, unpack } from '@rrweb/all';
import '@rrweb/all/dist/style.css';

有关 API 详情和示例,请参阅指南。

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

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

使用 current 指向最新稳定版本,或固定到精确版本(例如 https://cdn.rrweb.com/all/2.0.1/all.js 和 https://cdn.rrweb.com/all/2.0.1/style.css),以获得不可变的生产环境 URL。完整的 URL 结构和目录参见 CDN 资源文档。

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

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

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

旧的 UMD 全局变量是 rrweb,因此你需要为示例中的 API 加上前缀,例如 rrweb.record、new rrweb.Replayer(...)、rrweb.pack 和 rrweb.unpack,而不是直接使用这些函数。

在 GitHub 上编辑 README

@rrweb/all 发布说明 ​

2.1.1 ​

补丁变更 ​

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

2.1.0 ​

补丁变更 ​

  • 更新依赖 [7f0f75f, 6fe4fed]:
    • rrweb@2.1.0
    • @rrweb/types@2.1.0
    • @rrweb/packer@2.1.0

2.0.1 ​

补丁变更 ​

  • #1857 201a528 感谢 @Juice10! - 通过在打包入口中导入 rrweb 的回放样式并导出 CSS 子路径,从 @rrweb/all 分发 dist/style.css。

  • 更新依赖 [5f52d63]:

    • rrweb@2.0.1
    • @rrweb/types@2.0.1
    • @rrweb/packer@2.0.1

2.0.0 ​

重大变更 ​

  • #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.20 ​

补丁变更 ​

  • 更新依赖 [6388fb5]:
    • rrweb@2.0.0-alpha.20
    • @rrweb/types@2.0.0-alpha.20
    • @rrweb/packer@2.0.0-alpha.20

2.0.0-alpha.19 ​

补丁变更 ​

2.0.0-alpha.18 ​

补丁变更 ​

  • #1593 5a78938 感谢 @daibhin! - NodeType 枚举已从 rrweb-snapshot 移至 @rrweb/types 以下类型已从 rrweb-snapshot 移至 @rrweb/types:documentNode、documentTypeNode、legacyAttributes、textNode、cdataNode、commentNode、elementNode、serializedNode、serializedNodeWithId、serializedElementNodeWithId、serializedTextNodeWithId、IMirror、INode、mediaAttributes、attributes 和 DataURLOptions
  • 更新依赖 [04ee6ed, 5fbb904, 5a78938, 53b83bb]:
    • rrweb@2.0.0-alpha.18
    • @rrweb/types@2.0.0-alpha.18
    • @rrweb/packer@2.0.0-alpha.18

2.0.0-alpha.17 ​

补丁变更 ​

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 了解这些变更。

补丁变更 ​