Skip to content

Commit 06d0dbe

Browse files
committed
Create a new umd folder alongside dist for output of UMD files with a plain .js instead of .cjs extension, as the latter won't be served with the correct mime type by jsdelivr
- rrweb-io#1687 (just rename `.cjs` to `.js`) was rejected due to the the 'dual package hazard' [1], and produces a warning when run through publint.dev (which was the original motivation for changing to \.cjs) - jsdelivr won't be serving `.cjs` with the correct mime type: jsdelivr/jsdelivr#18584 [1] https://nodejs.org/en/learn/modules/publishing-a-package#the-dual-package-hazard
1 parent f233472 commit 06d0dbe

File tree

4 files changed

+16
-11
lines changed

4 files changed

+16
-11
lines changed

guide.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,13 @@ You are recommended to install rrweb via jsdelivr's CDN service:
1515
rel="stylesheet"
1616
href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/style.css"
1717
/>
18-
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.umd.min.cjs"></script>
18+
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/umd/rrweb.min.js"></script>
1919
```
2020

2121
Also, you can link to a specific version number that you can update manually:
2222

2323
```html
24-
<script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0-alpha.14/dist/rrweb.umd.min.cjs"></script>
24+
<script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0-alpha.14/umd/rrweb.min.js"></script>
2525
```
2626

2727
#### 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
3030
This also can be done by using the `@rrweb/record` package and the CDN service:
3131

3232
```html
33-
<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/dist/record.umd.min.cjs"></script>
33+
<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/umd/record.min.js"></script>
3434
```
3535

3636
#### Other packages

guide.zh_CN.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,21 @@
1313
rel="stylesheet"
1414
href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/style.css"
1515
/>
16-
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.umd.min.cjs"></script>
16+
<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/umd/rrweb.min.js"></script>
1717
```
1818

1919
也可以在 URL 中指定具体的版本号,例如:
2020

2121
```html
22-
<script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0-alpha.14/dist/rrweb.umd.min.cjs"></script>
22+
<script src="https://cdn.jsdelivr.net/npm/rrweb@2.0.0-alpha.14/umd/rrweb.min.js"></script>
2323
```
2424

2525
#### 仅引入录制部分
2626

2727
rrweb 代码分为录制和回放两部分,大多数时候用户在被录制的应用中只需要引入录制部分代码。同样可以通过使用 @rrweb/record 包和 CDN 服务来实现:
2828

2929
```html
30-
<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/dist/record.umd.min.cjs"></script>
30+
<script src="https://cdn.jsdelivr.net/npm/@rrweb/record@latest/umd/record.min.js"></script>
3131
```
3232

3333
#### 其他包

packages/rrweb-player/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ rrweb-player can also be included with `<script>`:
1919
rel="stylesheet"
2020
href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"
2121
/>
22-
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.umd.cjs"></script>
22+
<script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/umd/index.js"></script>
2323
```
2424

2525
Or installed by using NPM:

vite.config.default.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
/// <reference types="vite/client" />
22
import dts from 'vite-plugin-dts';
3-
import { copyFileSync } from 'node:fs';
3+
import { copyFileSync, mkdirSync } from 'node:fs';
44
import { defineConfig, LibraryOptions, LibraryFormats, Plugin } from 'vite';
55
import { build, Format } from 'esbuild';
6-
import { resolve } from 'path';
6+
import { resolve, dirname } from 'path';
77
import { umdWrapper } from 'esbuild-plugin-umd-wrapper';
88
import * as fs from 'node:fs';
99
import { visualizer } from 'rollup-plugin-visualizer';
@@ -51,22 +51,27 @@ function minifyAndUMDPlugin({
5151
outDir,
5252
});
5353
} else {
54+
mkdirSync(dirname(outputFilePath).replace('/dist', '/umd'));
55+
const outUmd = `${outputFilePath}.umd.cjs`;
5456
await buildFile({
5557
name,
5658
input: inputFilePath,
57-
output: `${outputFilePath}.umd.cjs`,
59+
output: outUmd,
5860
minify: false,
5961
isCss: false,
6062
outDir,
6163
});
64+
copyFileSync(outUmd, `${outputFilePath.replace('/dist/', '/umd/')}.js`);
65+
const outUmdMin = `${outputFilePath}.umd.min.cjs`;
6266
await buildFile({
6367
name,
6468
input: inputFilePath,
65-
output: `${outputFilePath}.umd.min.cjs`,
69+
output: outUmdMin,
6670
minify: true,
6771
isCss: false,
6872
outDir,
6973
});
74+
copyFileSync(outUmdMin, `${outputFilePath.replace('/dist/', '/umd/')}.min.js`);
7075
}
7176
}
7277
}

0 commit comments

Comments
 (0)