Umd folder

.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

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

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>
 ```
 
 #### 其他包

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/index.js"></script>
 ```
 
 Or installed by using NPM：

vite.config.default.ts

@@ -1,9 +1,9 @@
 /// <reference types="vite/client" />
 import dts from 'vite-plugin-dts';
-import { copyFileSync } from 'node:fs';
+import { copyFileSync, mkdirSync, existsSync } from 'node:fs';
 import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite';
 import { build, Format } from 'esbuild';
-import { resolve } from 'path';
+import { resolve, dirname } from 'path';
 import { umdWrapper } from 'esbuild-plugin-umd-wrapper';
 import * as fs from 'node:fs';
 import { visualizer } from 'rollup-plugin-visualizer';
@@ -51,22 +51,38 @@ function minifyAndUMDPlugin({
               outDir,
             });
           } else {
+            const umdDir = dirname(outputFilePath).replace('/dist', '/umd');
+            if (!existsSync(umdDir)) {
+              mkdirSync(umdDir);
+            }
+            const outUmd = `${outputFilePath}.umd.cjs`;
             await buildFile({
               name,
               input: inputFilePath,
-              output: `${outputFilePath}.umd.cjs`,
+              output: outUmd,
               minify: false,
               isCss: false,
               outDir,
             });
+            // Workaround because jsdelivr does use correct mime types for .umd.cjs
+            // More info: https://github.com/jsdelivr/jsdelivr/issues/18584 https://github.com/rrweb-io/rrweb/pull/1704
+            copyFileSync(
+              outUmd,
+              `${outputFilePath.replace('/dist/', '/umd/')}.js`,
+            );
+            const outUmdMin = `${outputFilePath}.umd.min.cjs`;
             await buildFile({
               name,
               input: inputFilePath,
-              output: `${outputFilePath}.umd.min.cjs`,
+              output: outUmdMin,
               minify: true,
               isCss: false,
               outDir,
             });
+            copyFileSync(
+              outUmdMin,
+              `${outputFilePath.replace('/dist/', '/umd/')}.min.js`,
+            );
           }
         }
       }