Skip to content

Commit 4e75adf

Browse files
ctavanctavan
authored
feat: add UMD build to npm package (#357)
Fixes #345.
1 parent 55e895f commit 4e75adf

File tree

11 files changed

+237
-0
lines changed

11 files changed

+237
-0
lines changed

‎README.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,5 +317,31 @@ $ uuid v1
317317

318318
Type `uuid --help` for usage details
319319

320+
## UMD Build
321+
322+
If you want to load a minified UMD build directly in the browser you can use one of the popular npm
323+
CDNs:
324+
325+
```html
326+
<script src="https://unpkg.com/uuid@latest/dist/umd/uuidv4.min.js"></script>
327+
<script>
328+
alert(uuidv4());
329+
</script>
330+
```
331+
332+
or
333+
334+
```html
335+
<script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script>
336+
<script>
337+
alert(uuidv4());
338+
</script>
339+
```
340+
341+
Available bundles:
342+
343+
- https://unpkg.com/uuid@latest/dist/umd/
344+
- https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/
345+
320346
----
321347
Markdown generated from [README_js.md](README_js.md) by [![RunMD Logo](http://i.imgur.com/h0FVyzU.png)](https://github.com/broofa/runmd)

‎README_js.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -295,3 +295,29 @@ $ uuid v1
295295
```
296296

297297
Type `uuid --help` for usage details
298+
299+
## UMD Build
300+
301+
If you want to load a minified UMD build directly in the browser you can use one of the popular npm
302+
CDNs:
303+
304+
```html
305+
<script src="https://unpkg.com/uuid@latest/dist/umd/uuidv4.min.js"></script>
306+
<script>
307+
alert(uuidv4());
308+
</script>
309+
```
310+
311+
or
312+
313+
```html
314+
<script src="https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/uuidv4.min.js"></script>
315+
<script>
316+
alert(uuidv4());
317+
</script>
318+
```
319+
320+
Available bundles:
321+
322+
- https://unpkg.com/uuid@latest/dist/umd/
323+
- https://cdn.jsdelivr.net/npm/uuid@latest/dist/umd/

‎examples/browser-umd/README.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
# UUID example Browser with UMD build
2+
3+
```
4+
npm install
5+
npm start
6+
```
7+
8+
Then navigate to `example.html`.

‎examples/browser-umd/example.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<title>UUID UMD example</title>
3+
<p>Please open the Developer Console to view output</p>
4+
<script src="./node_modules/uuid/dist/umd/uuid.min.js"></script>
5+
<script src="./node_modules/uuid/dist/umd/uuidv1.min.js"></script>
6+
<script src="./node_modules/uuid/dist/umd/uuidv3.min.js"></script>
7+
<script src="./node_modules/uuid/dist/umd/uuidv4.min.js"></script>
8+
<script src="./node_modules/uuid/dist/umd/uuidv5.min.js"></script>
9+
<script src="example.js"></script>

‎examples/browser-umd/example.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
/* global uuid:false, uuidv1:false, uuidv3:false, uuidv4:false, uuidv5:false */
2+
console.log('uuidv1()', uuidv1());
3+
4+
console.log('uuidv4()', uuidv4());
5+
6+
// ... using predefined DNS namespace (for domain names)
7+
console.log('uuidv3() DNS', uuidv3('hello.example.com', uuidv3.DNS));
8+
9+
// ... using predefined URL namespace (for, well, URLs)
10+
console.log('uuidv3() URL', uuidv3('http://example.com/hello', uuidv3.URL));
11+
12+
// ... using a custom namespace
13+
//
14+
// Note: Custom namespaces should be a UUID string specific to your application!
15+
// E.g. the one here was generated using this modules `uuid` CLI.
16+
const MY_NAMESPACE = '55238d15-c926-4598-b49d-cf4e913ba13c';
17+
console.log('uuidv3() MY_NAMESPACE', uuidv3('Hello, World!', MY_NAMESPACE));
18+
19+
// ... using predefined DNS namespace (for domain names)
20+
console.log('uuidv5() DNS', uuidv5('hello.example.com', uuidv5.DNS));
21+
22+
// ... using predefined URL namespace (for, well, URLs)
23+
console.log('uuidv5() URL', uuidv5('http://example.com/hello', uuidv5.URL));
24+
25+
// ... using a custom namespace
26+
//
27+
// Note: Custom namespaces should be a UUID string specific to your application!
28+
// E.g. the one here was generated using this modules `uuid` CLI.
29+
// const MY_NAMESPACE = '1b671a64-40d5-491e-99b0-da01ff1f3341';
30+
console.log('uuidv5() MY_NAMESPACE', uuidv5('Hello, World!', MY_NAMESPACE));
31+
32+
console.log('Same with default export');
33+
34+
console.log('uuid.v1()', uuid.v1());
35+
console.log('uuid.v4()', uuid.v4());
36+
console.log('uuid.v3() DNS', uuid.v3('hello.example.com', uuid.v3.DNS));
37+
console.log('uuid.v3() URL', uuid.v3('http://example.com/hello', uuid.v3.URL));
38+
console.log('uuid.v3() MY_NAMESPACE', uuid.v3('Hello, World!', MY_NAMESPACE));
39+
console.log('uuid.v5() DNS', uuid.v5('hello.example.com', uuid.v5.DNS));
40+
console.log('uuid.v5() URL', uuid.v5('http://example.com/hello', uuid.v5.URL));
41+
console.log('uuid.v5() MY_NAMESPACE', uuid.v5('Hello, World!', MY_NAMESPACE));

‎examples/browser-umd/package-lock.json‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/browser-umd/package.json‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
{
2+
"name": "uuid-example-browser-umd",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"build": "true",
7+
"start": "npm run build && npx http-server . -o"
8+
},
9+
"dependencies": {
10+
"uuid": "file:../../.local"
11+
}
12+
}

‎package-lock.json‎

Lines changed: 76 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,8 @@
4646
"lint-staged": "10.0.1",
4747
"npm-run-all": "4.1.5",
4848
"prettier": "1.19.1",
49+
"rollup": "1.30.0",
50+
"rollup-plugin-terser": "5.2.0",
4951
"runmd": "1.2.1",
5052
"selenium-webdriver": "3.6.0",
5153
"standard-version": "7.0.1"

‎rollup.config.js‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { terser } from 'rollup-plugin-terser';
2+
3+
function chunk(input, name) {
4+
return {
5+
input: `dist/esm-browser/${input}.js`,
6+
output: {
7+
file: `dist/umd/${name}.min.js`,
8+
format: 'umd',
9+
name,
10+
compact: true,
11+
},
12+
plugins: [terser()],
13+
};
14+
}
15+
16+
export default [
17+
chunk('index', 'uuid'),
18+
chunk('v1', 'uuidv1'),
19+
chunk('v3', 'uuidv3'),
20+
chunk('v4', 'uuidv4'),
21+
chunk('v5', 'uuidv5'),
22+
];

0 commit comments

Comments
 (0)