rrweb-io · eoghanmurray · May 28, 2025 · May 28, 2025 · Jun 12, 2025 · Jun 12, 2025
diff --git a/.changeset/thirty-shirts-grow.md b/.changeset/thirty-shirts-grow.md
@@ -0,0 +1,16 @@
+---
+"all": patch
+"packer": patch
+"plugins": patch
+"record": patch
+"replay": patch
+"rrdom": patch
+"rrdom-nodejs": patch
+"rrweb": patch
+"rrweb-player": patch
+"rrweb-snapshot": patch
+"types": patch
+"utils": patch
+---
+
+Provide a /umd/ output folder alongside the /dist/ one so that we can serve UMD (Universal Module Definition) files with a .js extension, without upsetting expectations set by package.json that all .js files in /dist/ are modules
diff --git a/.gitignore b/.gitignore
@@ -16,6 +16,7 @@ temp
 # output of `yarn build`
 build
 dist
+umd
 
 # turbo cache
 .turbo

diff --git a/README.md b/README.md
@@ -12,7 +12,7 @@
 [![Join the chat at slack](https://img.shields.io/badge/[email protected]?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
 [![Twitter Follow](https://img.shields.io/badge/twitter-@rrweb__io-teal.svg?logo=twitter)](https://twitter.com/rrweb_io)
 ![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.cjs?compression=gzip&label=total%20gzip%20size)
-![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.cjs?compression=gzip&label=recorder%20gzip%20size)
+![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@rrweb/record@latest/umd/record.min.js?compression=gzip&label=recorder%20gzip%20size)
 [![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb)
 
 [中文文档](./README.zh_CN.md)

diff --git a/README.zh_CN.md b/README.zh_CN.md
@@ -11,7 +11,7 @@
 
 [![Join the chat at slack](https://img.shields.io/badge/[email protected]?logo=slack)](https://join.slack.com/t/rrweb/shared_invite/zt-siwoc6hx-uWay3s2wyG8t5GpZVb8rWg)
 ![total gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.cjs?compression=gzip&label=total%20gzip%20size)
-![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.cjs?compression=gzip&label=recorder%20gzip%20size)
+![recorder gzip size](https://img.badgesize.io/https://cdn.jsdelivr.net/npm/@rrweb/record@latest/umd/record.min.js?compression=gzip&label=recorder%20gzip%20size)
 [![](https://data.jsdelivr.com/v1/package/npm/rrweb/badge)](https://www.jsdelivr.com/package/npm/rrweb)
 
 > 我已开通 Github Sponsor， 您可以通过赞助的形式帮助 rrweb 的开发。

diff --git a/guide.md b/guide.md
@@ -15,13 +15,13 @@ You are recommended to install rrweb via jsdelivr's CDN service:
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/style.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.umd.min.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/umd/rrweb.min.js"></script>
 ```
 
 Also, you can link to a specific version number that you can update manually:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].14/dist/rrweb.umd.min.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].19/umd/rrweb.min.js"></script>
 ```
 
 #### Only include the recorder code
@@ -30,7 +30,7 @@ rrweb's code includes both the record and the replay parts. Most of the time you
 This also can be done by using the `@rrweb/record` package and the CDN service:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/dist/record.umd.min.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/umd/record.min.js"></script>
 ```
 
 #### Other packages
@@ -326,7 +326,7 @@ rrweb-player can also be included with `<script>`：
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/umd/rrweb-player.js"></script>
 ```
 
 Or installed by using NPM：

diff --git a/guide.zh_CN.md b/guide.zh_CN.md
@@ -13,21 +13,21 @@
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/style.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.umd.min.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/umd/rrweb.min.js"></script>
 ```
 
 也可以在 URL 中指定具体的版本号，例如：
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/[email protected].14/dist/rrweb.umd.min.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/[email protected].19/umd/rrweb.min.js"></script>
 ```
 
 #### 仅引入录制部分
 
 rrweb 代码分为录制和回放两部分，大多数时候用户在被录制的应用中只需要引入录制部分代码。同样可以通过使用 @rrweb/record 包和 CDN 服务来实现：
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/dist/record.umd.min.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/umd/record.min.js"></script>
 ```
 
 #### 其他包
@@ -320,7 +320,7 @@ rrweb-player 同样可以使用 CDN 方式安装：
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/umd/rrweb-player.js"></script>
 ```
 
 或者通过 npm 安装：

diff --git a/packages/plugins/rrweb-plugin-canvas-webrtc-record/package.json b/packages/plugins/rrweb-plugin-canvas-webrtc-record/package.json
@@ -20,6 +20,7 @@
     }
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],

diff --git a/packages/plugins/rrweb-plugin-canvas-webrtc-replay/package.json b/packages/plugins/rrweb-plugin-canvas-webrtc-replay/package.json
@@ -20,6 +20,7 @@
     }
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],

diff --git a/packages/plugins/rrweb-plugin-console-record/package.json b/packages/plugins/rrweb-plugin-console-record/package.json
@@ -20,6 +20,7 @@
     }
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],

diff --git a/packages/plugins/rrweb-plugin-console-replay/package.json b/packages/plugins/rrweb-plugin-console-replay/package.json
@@ -20,6 +20,7 @@
     }
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],

diff --git a/packages/plugins/rrweb-plugin-sequential-id-record/package.json b/packages/plugins/rrweb-plugin-sequential-id-record/package.json
@@ -20,6 +20,7 @@
     }
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],

diff --git a/packages/plugins/rrweb-plugin-sequential-id-replay/package.json b/packages/plugins/rrweb-plugin-sequential-id-replay/package.json
@@ -20,6 +20,7 @@
     }
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],

diff --git a/packages/record/package.json b/packages/record/package.json
@@ -44,6 +44,7 @@
     }
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],

diff --git a/packages/replay/package.json b/packages/replay/package.json
@@ -45,6 +45,7 @@
     "./dist/style.css": "./dist/style.css"
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],

diff --git a/packages/rrdom-nodejs/package.json b/packages/rrdom-nodejs/package.json
@@ -33,6 +33,7 @@
     }
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],

diff --git a/packages/rrdom/package.json b/packages/rrdom/package.json
@@ -21,6 +21,7 @@
     }
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],

diff --git a/packages/rrweb-player/README.md b/packages/rrweb-player/README.md
@@ -19,7 +19,7 @@ rrweb-player can also be included with `<script>`：
   rel="stylesheet"
   href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
 />
-<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.umd.cjs"></script>
+<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/umd/rrweb-player.js"></script>
 ```
 
 Or installed by using NPM：

diff --git a/packages/rrweb-player/package.json b/packages/rrweb-player/package.json
@@ -51,6 +51,7 @@
     "./dist/style.css": "./dist/style.css"
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],

diff --git a/packages/rrweb-snapshot/package.json b/packages/rrweb-snapshot/package.json
@@ -44,6 +44,7 @@
     }
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],

diff --git a/packages/rrweb/package.json b/packages/rrweb/package.json
@@ -49,6 +49,7 @@
     "./dist/style.css": "./dist/style.css"
   },
   "files": [
+    "umd",
     "dist",
     "package.json"
   ],
-Original file line number
+Diff line change
@@ Expand Up / @@ -16,6 +16,7 @@ temp @@
     # output of `yarn build`
     build
     dist
+    umd
     # turbo cache
     .turbo
@@ Expand Down @@