Skip to content

Commit 603aec4

Browse files
kossnocorpkossnocorp
committed
Add the CDN guide
1 parent ea6da53 commit 603aec4

2 files changed

Lines changed: 119 additions & 0 deletions

File tree

‎docs/cdn.md‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
# CDN
2+
3+
Starting with v3.6.0, the CDN versions of date-fns are available on [jsDelivr](https://www.jsdelivr.com/package/npm/date-fns) and other CDNs. They expose the date-fns functionality via the `window.dateFns` global variable.
4+
5+
Unlike the npm package, the CDN is transpiled to be compatible with IE11, so it supports a wide variety of legacy browsers and environments.
6+
7+
```html
8+
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
9+
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/es/cdn.min.js"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/ru/cdn.min.js"></script>
11+
<script>
12+
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date());
13+
//=> "last Friday at 7:26 p.m."
14+
15+
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
16+
locale: dateFns.locale.es,
17+
});
18+
//=> "el viernes pasado a las 19:26"
19+
20+
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
21+
locale: dateFns.locale.ru,
22+
});
23+
//=> "в прошлую пятницу в 19:26"
24+
</script>
25+
```
26+
27+
The CDN versions are available for the main module, all & individual locales, and the FP submodule.
28+
29+
They come in two flavors: `cdn.js` and `cdn.min.js`. The latter is minified and should be used in production. The former is useful for debugging and development.
30+
31+
Keep in mind that using the CDN versions in production is suboptimal because they bundle all the date-fns functionality you will never use. It's much better to use the npm package and a tree-shaking-enabled bundler like webpack or Rollup. However, the CDN versions are helpful for quick prototyping, small projects, educational purposes, or working in a legacy environment.
32+
33+
## Main module
34+
35+
The main module with all functions bundled:
36+
37+
```
38+
https://cdn.jsdelivr.net/npm/date-fns@VERSION/cdn.js
39+
https://cdn.jsdelivr.net/npm/date-fns@VERSION/cdn.min.js
40+
```
41+
42+
You can access it via the `dateFns` global variable:
43+
44+
```html
45+
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
46+
<script>
47+
dateFns.addDays(new Date(2014, 1, 11), 10);
48+
//=> Tue Feb 21 2014 00:00:00
49+
</script>
50+
```
51+
52+
## The FP submodule
53+
54+
The FP submodule with all functions bundled:
55+
56+
```
57+
https://cdn.jsdelivr.net/npm/date-fns@VERSION/fp/cdn.js
58+
https://cdn.jsdelivr.net/npm/date-fns@VERSION/fp/cdn.min.js
59+
```
60+
61+
You can access it via the `dateFns.fp` global variable:
62+
63+
```html
64+
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/fp/cdn.min.js"></script>
65+
<script>
66+
dateFns.fp.addDays(10, new Date(2014, 1, 11));
67+
//=> Tue Feb 21 2014 00:00:00
68+
</script>
69+
```
70+
71+
## Locales
72+
73+
All locales bundled:
74+
75+
```
76+
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/cdn.js
77+
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/cdn.min.js
78+
```
79+
80+
You can access them via the `dateFns.locale` global variable:
81+
82+
```html
83+
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
84+
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/cdn.min.js"></script>
85+
<script>
86+
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
87+
locale: dateFns.locale.es,
88+
});
89+
//=> "el viernes pasado a las 19:26"
90+
</script>
91+
```
92+
93+
The locales are also available as individual files.
94+
95+
```
96+
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/LOCALE/cdn.js
97+
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/LOCALE/cdn.min.js
98+
```
99+
100+
You can access them via the `dateFns.locale.LOCALE` global variable:
101+
102+
```html
103+
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
104+
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/es/cdn.min.js"></script>
105+
<script>
106+
dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
107+
locale: dateFns.locale.es,
108+
});
109+
//=> "el viernes pasado a las 19:26"
110+
</script>
111+
```

‎docs/config.js‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,14 @@ module.exports.config = {
8484
summary: "Time zone functions",
8585
path: "timeZones.md",
8686
},
87+
{
88+
type: "markdown",
89+
slug: "CDN",
90+
category: "General",
91+
title: "CDN",
92+
summary: "CDN version of date-fns",
93+
path: "cdn.md",
94+
},
8795
{
8896
type: "markdown",
8997
slug: "webpack",

0 commit comments

Comments
 (0)