零构建接入 Temporaltemporal-polyfill CDN 引用的 3 种方式与示例代码【免费下载链接】temporal-polyfillA lightweight polyfill for Temporal, successor to the JavaScript Date object项目地址: https://gitcode.com/gh_mirrors/tempo/temporalJavaScript 的Date对象终于迎来了继任者 Temporal而temporal-polyfill正是官方规范的轻量级实现仅19.5 kBmingzip、与规范高度一致还支持通过CDN 引用实现零构建接入。本文用 3 种 CDN 引入方式 可直接复制的示例代码帮你 5 分钟上手 Temporal完全不需要 npm、webpack 或 Vite。为什么选择 temporal-polyfill 而不是其他 polyfill在动手前先快速了解它的核心优势这决定了你是否应该选它对比维度temporal-polyfilljs-temporal/polyfill体积mingzip19.5 kB 52.1 kB167%全局安装CDN 引入✅ 支持❌ 不支持规范符合度近乎完美仅 2 处有意偏差较高完整日历支持需/full/构建23.4 kB单包全量体积小、可全局安装、支持 CDN 零构建引入是它区别于同类方案的最大亮点。相关体积对比数据可在polyfill/scripts/size-comparison/RESULTS.md中查看。方式一最常用的基础版 CDN 引用标准日历如果你的业务只涉及iso8601标准公历和gregory日历直接用基础版即可这也是官方文档polyfill/README.md的 CDN Usage 章节推荐的最常见方式。!-- 1. 引入 CDN 脚本推荐锁定版本号 -- script srchttps://cdn.jsdelivr.net/npm/temporal-polyfill1.0.2/global.min.js/script !-- 2. 直接使用全局 Temporal 对象 -- script const now Temporal.Now.zonedDateTimeISO() console.log(now.toString()) // 输出示例2026-08-20T15:30:0008:00[Asia/Shanghai] /script这段代码会自动完成三件事加载 polyfill、检测原生Temporal有就用原生的、没有则注入全局实现。打开浏览器控制台就能跑这就是零构建的含义。方式二完整版 CDN 引用支持 14 种日历系统当业务涉及佛历、农历、希伯来历、日本和历等场景时需要切换到/full/构建。它额外支持buddhist、chinese、coptic、dangi、ethiopic、hebrew、indian、islamic系列、japanese、persian、roc等 14 种日历系统体积仅增至 23.4 kB。script srchttps://cdn.jsdelivr.net/npm/temporal-polyfill1.0.2/full/global.min.js/script script // 获取当前时间的佛历表示 const buddhist Temporal.Now.zonedDateTimeISO().withCalendar(buddhist) console.log(buddhist.toString()) // 用农历创建日期 const chineseDate Temporal.PlainDate.from(2026-08-20) .withCalendar(chinese) console.log(chineseDate.toString()) // 输出农历纪年信息 /script 注意/full/构建与基础版互斥只需引入一个不要两个都加载。打包与入口配置逻辑可在polyfill/scripts/bundle.js中查看。方式三ESM 模块方式 CDN 引用无副作用导入如果你更喜欢模块化的写法jsDelivr 的esm端点可以直接把 npm 包转成 ESM 模块通过script typemodule零构建引入这也是最现代化的方式。script typemodule // 从 CDN 直接导入 Temporalponyfill 风格不污染全局 import { Temporal } from https://cdn.jsdelivr.net/npm/temporal-polyfill1.0.2/esm const today Temporal.PlainDate.from(2026-08-20) const nextWeek today.add({ days: 7 }) console.log(nextWeek.toString()) // 2026-08-27 /script如果项目里有多处使用推荐配合Import Maps把包名映射到 CDN 地址代码更整洁script typeimportmap { imports: { temporal-polyfill: https://cdn.jsdelivr.net/npm/temporal-polyfill1.0.2/esm } } /script script typemodule import { Temporal } from temporal-polyfill const duration Temporal.Duration.from({ hours: 2, minutes: 30 }) console.log(duration.total(minutes)) // 150 /script这种方式适合页面中只用到部分 Temporal 能力、不想引入全局变量、或正在为将来替换为原生 Temporal 做准备的项目。一个完整示例用 CDN 引用实现倒计时把三种方式串起来下面是一个零构建的完整倒计时页面直接保存为 HTML 双击即可运行!DOCTYPE html html langzh-CN head meta charsetUTF-8 titletemporal-polyfill CDN 示例活动倒计时/title /head body h1距离活动开始还有/h1 div idcountdown/div script srchttps://cdn.jsdelivr.net/npm/temporal-polyfill1.0.2/global.min.js/script script const target Temporal.ZonedDateTime.from(2026-10-01T10:00:0008:00[Asia/Shanghai]) function update() { const now Temporal.Now.zonedDateTimeISO() const remaining now.until(target, { largestUnit: day }) document.getElementById(countdown).textContent ${remaining.days} 天 ${remaining.hours} 小时 ${remaining.minutes} 分钟 } update() setInterval(update, 60000) /script /body /htmlTemporal 处理时区、夏令时和跨日计算都比Date对象可靠得多这段代码在支持 BigInt 的现代浏览器Chrome 67、Firefox 68、Safari 14中都能流畅运行。常见问题与注意事项Q1CDN 版本号要写吗建议始终锁定版本如1.0.2避免大版本更新带来破坏性变更不写版本号虽然能自动获取最新版但生产环境有隐患。Q2基础版和完整版怎么选只用公历选基础版更小涉及非公历日历系统选/full/版。官方支持矩阵与浏览器最低版本要求见polyfill/README.md。Q3会和原生 Temporal 冲突吗不会。global入口会自动检测浏览器已原生支持 Temporal 时直接复用否则才注入 polyfill 实现天然向后兼容。Q4之后想迁移到原生 Temporal 怎么办无需担心锁定风险。项目还提供 tree-shakeable 函数 API 和 codemod 迁移工具未来可一键把代码改写为原生Temporal.*语法具体见codemod/README.md。总结零构建接入 Temporal 只需一行script基础场景选global.min.js多日历场景选full/global.min.js追求模块化则用esm配合 Import Maps。temporal-polyfill 以 19.5 kB 的体积、接近完美的规范符合度让你在原生 Temporal 全面普及之前就能提前用上更可靠的日期时间 API。想要查看源码或参与贡献可 clone 仓库https://gitcode.com/gh_mirrors/tempo/temporal深入探索。【免费下载链接】temporal-polyfillA lightweight polyfill for Temporal, successor to the JavaScript Date object项目地址: https://gitcode.com/gh_mirrors/tempo/temporal创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考