陈随易

从 v3.6.0 开始，date-fns 的 CDN 版本可在 jsDelivr 和其他 CDN 上使用。

它通过 window.dateFns 全局变量公开 date-fns 功能。

与 npm 包不同，CDN 被转译为与 IE11 兼容，因此它支持各种旧版浏览器和环境。

html

<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/es/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/ru/cdn.min.js"></script>
<script>
    dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date());
    //=> "last Friday at 7:26 p.m."

    dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
        locale: dateFns.locale.es
    });
    //=> "el viernes pasado a las 19:26"

    dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
        locale: dateFns.locale.ru
    });
    //=> "в прошлую пятницу в 19:26"
</script>

CDN 版本适用于主模块、所有和单个语言环境以及 FP 子模块。

它们有两种版本：cdn.js 和 cdn.min.js。

后者是精简版，应该用于生产环境，前者适用于调试和开发。

请记住，在生产中使用 CDN 版本并不是最理想的，因为它们会捆绑您永远不会使用的所有 date-fns 功能。

最好使用 npm 包和启用 tree-shaking 的捆绑器 (如 webpack 或 Rollup)。

但是，CDN 版本对于快速原型设计、小型项目、教育目的或在旧环境中工作很有帮助。

主模块

捆绑了所有功能的主模块：

https://cdn.jsdelivr.net/npm/date-fns@VERSION/cdn.js
https://cdn.jsdelivr.net/npm/date-fns@VERSION/cdn.min.js

您可以通过 dateFns 全局变量访问它：

html

<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script>
    dateFns.addDays(new Date(2014, 1, 11), 10);
    //=> Tue Feb 21 2014 00:00:00
</script>

函数式

捆绑了所有功能的 FP 子模块：

https://cdn.jsdelivr.net/npm/date-fns@VERSION/fp/cdn.js
https://cdn.jsdelivr.net/npm/date-fns@VERSION/fp/cdn.min.js

您可以通过 dateFns.fp 全局变量访问它：

html

<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/fp/cdn.min.js"></script>
<script>
    dateFns.fp.addDays(10, new Date(2014, 1, 11));
    //=> Tue Feb 21 2014 00:00:00
</script>

本地化

所有语言环境捆绑：

https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/cdn.js
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/cdn.min.js

您可以通过 dateFns.locale 全局变量访问它们：

html

<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/cdn.min.js"></script>
<script>
    dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
        locale: dateFns.locale.es
    });
    //=> "el viernes pasado a las 19:26"
</script>

语言环境也可以作为单独的文件提供。

https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/LOCALE/cdn.js
https://cdn.jsdelivr.net/npm/date-fns@VERSION/locale/LOCALE/cdn.min.js

您可以通过 dateFns.locale.LOCALE 全局变量访问它们：

html

<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/cdn.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/date-fns@3.6.0/locale/es/cdn.min.js"></script>
<script>
    dateFns.formatRelative(dateFns.subDays(new Date(), 3), new Date(), {
        locale: dateFns.locale.es
    });
    //=> "el viernes pasado a las 19:26"
</script>

主模块 ​

函数式 ​

本地化 ​

主模块

函数式

本地化