打包体积再瘦一圈:temporal-polyfill 树摇函数 API 入门与 6 大实用场景

发布时间:2026/8/21 12:38:42
打包体积再瘦一圈:temporal-polyfill 树摇函数 API 入门与 6 大实用场景 打包体积再瘦一圈temporal-polyfill 树摇函数 API 入门与 6 大实用场景【免费下载链接】temporal-polyfillA lightweight polyfill for Temporal, successor to the JavaScript Date object项目地址: https://gitcode.com/gh_mirrors/tempo/temporal还在为 JavaScript 的Date对象头疼Temporal 作为它的官方继任者已经把日期时间处理带入了全新的时代而temporal-polyfill则是目前最轻量的 Temporal polyfillmingzip 后仅19.5 kB。不过如果你对打包体积还有更高的要求temporal-polyfill 还提供了一套树摇函数 APItree-shakeable function API让打包工具只保留你真正用到的函数。本文带你入门这套 API并盘点 6 大实用场景帮你把体积再瘦一圈。什么是 temporal-polyfill 树摇函数 API传统 polyfill 会一次性引入庞大的Temporal.*类Temporal.PlainDate、Temporal.ZonedDateTime……无论你只用其中一小部分整段代码都会被塞进最终的 bundle 里。temporal-polyfill 的树摇函数 API 反其道而行每个操作都是一个独立的纯函数作用在普通的 record 对象上打包器如 Vite、webpack、Rollup可以精准地只保留你 import 的那些函数。import * as PlainDateFns from temporal-polyfill/fns/PlainDate const date PlainDateFns.create(2026, 6, 1) const later PlainDateFns.addMonths(date, 2) PlainDateFns.toString(later) // 2026-08-01每个 Temporal 类型都有自己独立的入口例如temporal-polyfill/fns/PlainDate、temporal-polyfill/fns/ZonedDateTime、temporal-polyfill/fns/Instant完整目录见 docs/fns/index.md。与传统类式 API 相比能省多少方案mingzip 体积树摇友好度js-temporal/polyfill52.1 kB低整包引入temporal-polyfill完整包19.5 kB中temporal-polyfill/fns/*函数 API仅你用到的那几个函数极高 ✅更重要的是这套函数 API 还附带了不少标准 API 没有的便捷函数——比如startOfMonth、endOfWeek、addDays、diffYears、roundToWeek等。它们不是偏离规范的野路子而是把标准方法固定单位后的精简版走的是更短的内部路径体积和性能都更优。快速上手安装与第一个函数安装与使用非常简单npm install temporal-polyfillimport * as PlainDateFns from temporal-polyfill/fns/PlainDate import * as NowFns from temporal-polyfill/fns/Now // 今天的日期 const today NowFns.plainDateISO() // 30 天后的日期 const later PlainDateFns.addDays(today, 30) // 输出2026-09-19 之类的结果 console.log(PlainDateFns.toString(later))函数 API 在运行时如果环境里有原生Temporal会自动使用原生实现无需额外配置。各类型的函数清单可查阅 docs/fns/plaindate.md、docs/fns/now.md 等文档。6 大实用场景场景一日期选择器组件库——共享且可删除的依赖 如果你是组件库作者日期选择器、日程表、日历网格一定经历过日期库选择困境捆绑 dayjs/date-fns还是让用户自己挑适配器树摇函数 API 的解法是把temporal-polyfill声明为peer dependency组件内部只 import 自己需要的函数。{ peerDependencies: { temporal-polyfill: ^1.0.1 } }宿主应用装一份 polyfill你的组件和宿主共用同一份内部实现打包器自动去重不会重复引入多份日期库。详细的组件作者指南见 docs/fns/for-component-authors.md。场景二日历网格与日程排期 渲染月视图时你需要某月的第一天某月的最后一天某周的开始这类边界计算。函数 API 直接提供现成的startOfMonth、endOfMonth、startOfWeek一行搞定import * as PlainDateFns from temporal-polyfill/fns/PlainDate const monthStart PlainDateFns.startOfMonth(date) // 月初 const monthEnd PlainDateFns.endOfMonth(date) // 月末配合daysInMonth、dayOfWeek等属性函数可以轻松构建任意月份的日历格子代码量比手写Date少一个量级。场景三订阅到期与试用期倒计时 ⏳会员到期、试用期截止、优惠券有效期……这类相对时间推算是业务刚需。addMonths、addDays、subtract等算术函数加上compare比较函数让到期判断清晰可靠import * as PlainDateFns from temporal-polyfill/fns/PlainDate const expireDate PlainDateFns.addMonths(today, 1) // 1 个月后到期 const isExpired PlainDateFns.compare(today, expireDate) 0不再需要手工处理1 月 31 日加 1 个月这类溢出问题——addMonths会自动按日历规则修正2 月没有 31 号就落到月末。场景四考勤与工时统计 统计两个日期相差多少天、多少周是考勤报表里的高频操作。函数 API 的diffDays、diffWeeks、diffYears直接返回浮点数结果免去了标准 API 里构造 options 的繁琐import * as PlainDateFns from temporal-polyfill/fns/PlainDate const workdays PlainDateFns.diffDays(startDate, endDate) const weeks PlainDateFns.diffWeeks(startDate, endDate)场景五跨时区时间转换 处理纽约时间下午 3 点对应北京时间几点这类需求用ZonedDateTime与Instant函数入口即可import * as ZonedDateTimeFns from temporal-polyfill/fns/ZonedDateTime const zdt ZonedDateTimeFns.create(America/New_York, 2026, 6, 1, 15, 0) const offset ZonedDateTimeFns.offset(zdt) // 当前时区偏移如 -04:00完整的函数目录见 docs/fns/zoneddatetime.md 与 docs/fns/instant.md。场景六未来无忧——codemod 一键迁移回原生 Temporal 这套函数 API 不是一条不归路。等原生 Temporal 全面普及后官方提供了temporal-polyfill-codemod能把函数调用一键重写成地道的Temporal.*写法// 迁移前 const date PlainDateFns.create(2024, 5, 1) const next PlainDateFns.addDays(date, 3) // 迁移后 const date new Temporal.PlainDate(2024, 5, 1) const next date.add({ days: 3 })npx temporal-polyfill-codemod fns-to-temporal 路径迁移是机械且保守的无法确定改写的地方会留下诊断提示CI 可以帮你拦住漏网之鱼。详见 codemod/README.md。这意味着今天用函数 API 优化体积明天可以零成本回归原生没有锁定风险。写在最后temporal-polyfill 的树摇函数 API把体积敏感和标准未来完美地统一在了一个包内现在用最小代价获得 Temporal 的完整能力未来还能一键迁回原生。如果你对 monorepo 内的完整示例感兴趣可以克隆仓库体验 examples/fns-and-global 项目git clone https://gitcode.com/gh_mirrors/tempo/temporal想让项目打包体积再瘦一圈从temporal-polyfill/fns/*开始准没错。【免费下载链接】temporal-polyfillA lightweight polyfill for Temporal, successor to the JavaScript Date object项目地址: https://gitcode.com/gh_mirrors/tempo/temporal创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考