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.jshttps://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.recordnew rrweb.Replayer(...)rrweb.packrrweb.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 中会有更完善的定义;如果你需要特定类型,它们可能从新的包中导出(例如 PlayerMachineStateSpeedMachineState 现在从 @rrweb/replay 导出)。请查看 package.jsonmainexports 字段了解可用文件。

  • #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:documentNodedocumentTypeNodelegacyAttributestextNodecdataNodecommentNodeelementNodeserializedNodeserializedNodeWithIdserializedElementNodeWithIdserializedTextNodeWithIdIMirrorINodemediaAttributesattributesDataURLOptions
  • 更新依赖 [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 中会有更完善的定义;如果你需要特定类型,它们可能从新的包中导出(例如 PlayerMachineStateSpeedMachineState 现在从 @rrweb/replay 导出)。请查看 package.jsonmainexports 字段了解可用文件。

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

补丁变更