ARTICLE DETAIL

资讯详情

深耕编程入门与网站建设的一线实战洞察。

在 Node.js ESM 中使用 date-fns:官方示例深度解析与实战指南

在 Node.js ESM 中使用 date-fns:官方示例深度解析与实战指南 在 Node.js ESM 中使用 date-fns官方示例深度解析与实战指南【免费下载链接】date-fns⏳ Modern JavaScript date utility library ⌛️项目地址: https://gitcode.com/gh_mirrors/da/date-fns本指南基于 date-fns 官方仓库中的 Node.js ESM 使用示例系统讲解如何在原生 ES Modules 环境下安装、导入、运行 date-fns覆盖顶层命名导入、命名空间导入、函数式编程入口date-fns/fp、常量入口date-fns/constants以及子路径导入等全部官方示例场景。读完本文你将掌握 date-fns v4 在 Node.js ESM 下的完整导入方式、模块解析原理以及用命令行一键验证示例输出的实操方法。1. 官方 ESM 示例的整体结构date-fns 在仓库中为每种运行环境都准备了可独立运行的示例目录Node.js ESM 示例位于 pkgs/core/examples/node-esm其入口文档即本指南主体指出源码示例见example.js、fp.js与misc.jsCLI 用法见package.json。该目录共包含 7 个文件各司其职文件作用example.js展示顶层命名导入format 本地化 locale 用法fp.js展示函数式编程入口date-fns/fp的柯里化用法misc.js展示命名空间导入与多函数组合constants.js展示常量入口date-fns/constantspackage.json声明 ESM 包类型与依赖mise.toml定义安装与测试的 CLI 任务README.md使用说明本文主体四个示例脚本都遵循同一约定把计算结果与预期字符串做比较并把布尔结果打印到标准输出——成功时输出true。因此它们既是可以直接node运行的演示也是可自动断言的最小测试。2. ESM 环境准备type: module与本地依赖示例的 package.json 是 ESM 工程的典型配置{ name: date-fns/example-node-esm, version: 0.1.0, description: Example of date-fns usage with Node.js ESM, license: MIT, type: module, main: example.ts, dependencies: { date-fns: ../../dist/date-fns } }要点解读type: module这是 Node.js 将.js文件按 ESM 解析的关键开关。声明后目录内的example.js、fp.js、misc.js、constants.js全部以 ES Modules 语义加载顶层import语句才能直接使用。依赖指向本地构建产物date-fns: ../../dist/date-fns是仓库内的相对路径依赖指向构建后的 date-fns 包。这意味着运行示例前需要先完成构建由mise.toml的 install 任务依赖触发实际项目中替换为date-fns: ^4.0.0之类的 npm 版本声明即可。无需任何转译工具这些示例直接用原生 Node.js 运行不依赖 Babel、ts-node 或打包器这正是 ESM 支持的初衷。3. 基础用法format命名导入与 locale 本地化example.js 完整代码如下import { format } from date-fns; import { eo } from date-fns/locale; const result format( new Date(2017, 0, 25, 21, 28, 15), eeee, dd MMMM HH:mm:ss, { locale: eo }, ); console.log(result merkredo, 25 januaro 21:28:15);它演示了两类导入与一个核心 API顶层命名导入import { format } from date-fns从包主入口直接取函数。这是最常用、也最利于 tree-shaking 的写法。locale 子路径导入import { eo } from date-fns/locale导入世界语Esperantolocale 对象。date-fns v4 内置 90 个 locale见 pkgs/core/package.json 的./locale/*导出项如./locale/zh-CN、./locale/en-US、./locale/ja等。format的第三个参数{ locale: eo }把格式化本地化。format(date, eeee, dd MMMM HH:mm:ss)中的eeee输出完整星期名、dd补零日期、MMMM完整月份名、HH:mm:ss为 24 小时制时间。使用 eo locale 后2017-01-25 21:28:15 被格式化为merkredo, 25 januaro 21:28:15世界语星期三1 月 25 日 21:28:15。从 format 源码目录 可以看到format内部依赖 src/_lib/format 的 token 解析逻辑locale 对象正是通过options.locale注入各 token 的本地化文案因此不传 locale 时默认使用 src/_lib/defaultLocale 中的英文配置。4. 命名空间导入一次引入整个 APImisc.js 展示了把整个包挂到命名空间下的写法import { format } from date-fns; import * as dateFns from date-fns; const date dateFns.addDays(new Date(2017, 0, 25, 21, 28, 15), 1); const result format(date, dd.MM.yyyy HH:mm:ss); console.log(result 26.01.2017 21:28:15);import * as dateFns from date-fns将全部导出收集到dateFns命名空间随后可用dateFns.addDays(...)调用。addDays(date, 1)在 2017-01-25 基础上加 1 天得到 2017-01-26再经format输出26.01.2017 21:28:15。命名空间导入与命名导入可以共存于同一文件。从 src/index.ts 的结构看主入口聚合了全部函数模块这正是命名空间导入能拿到完整 API 的原因。5. 函数式编程风格date-fns/fp的柯里化组合fp.js 演示 date-fns 的函数式入口这也是 ESM 示例中最有特色的部分import { addYears, formatWithOptions } from date-fns/fp; import { eo } from date-fns/locale; const addFiveYears addYears(5); const dateToString formatWithOptions({ locale: eo }, d MMMM yyyy); const dates [ new Date(2017, 0 /* Jan */, 1), new Date(2017, 1 /* Feb */, 11), new Date(2017, 6 /* Jul */, 2), ]; const formattedDates dates .map((date) dateToString(addFiveYears(date))) .join(, ); console.log( formattedDates 1 januaro 2022, 11 februaro 2022, 2 julio 2022, );关键点date-fns/fp子路径所有函数都是柯里化curried且参数顺序调整为数据最后的变体。addYears(5)返回一个加 5 年的待应用函数可反复复用于多个日期。formatWithOptionsoptions 对象locale被前置形成formatWithOptions({ locale: eo }, d MMMM yyyy)的偏应用partial application先固定 locale 与格式模板再等待具体日期。声明式组合dates.map((date) dateToString(addFiveYears(date)))用两个小函数拼出加 5 年并本地化格式化的完整流水线最终输出1 januaro 2022, 11 februaro 2022, 2 julio 2022。fp 入口由 src/fp/index.ts 统一导出其中每个普通函数都对应一个柯里化变体另有WithOptions后缀变体用于接收 options对应目录见 src/fp如addYears与addYearsWithOptions、format与formatWithOptions。6. 常量入口date-fns/constantsconstants.js 展示了常量导入import { maxTime } from date-fns/constants; console.log(maxTime 8640000000000000);date-fns/constants是独立的子路径导出提供maxTime、minTime、daysInWeek、daysInYear等常用日期常量见 src/constants/index.ts。maxTime的值为8640000000000000即 JavaScriptDate对象可表示的最大时间戳毫秒对应约 275760 年。这类常量可用于时间合法性校验等场景。7. 子路径导入的底层支撑exports 导出映射上述date-fns/locale、date-fns/fp、date-fns/constants乃至date-fns/add、date-fns/format等细粒度子路径之所以可用依赖 pkgs/core/package.json 中庞大的exports映射开发态源码直接映射如.: ./src/index.ts、./fp: ./src/fp/index.ts、./locale: ./src/locale/index.ts每个函数如./addDays、./format也都映射到对应src/目录。发布态的publishConfig.exports则按require/import双条件分别提供.cjs与.js构建产物及各自的.d.cts/.d.ts类型声明参见 pkgs/core/package.json 中./fp等条目的require/import双分支。对比仓库中的 CJS 示例 test.cjs使用require(date-fns)、require(date-fns/add)、require(date-fns/fp)和 ESM 示例 test.js使用import同名子路径可以看出同一套子路径在两种模块系统下都成立这正是exports条件导出的价值——ESM 下用importCJS 下用require包内部自动选择正确的构建产物与类型声明。8. 运行与验证用 mise 任务一键执行示例通过 mise.toml 定义了两个 CLI 任务[tasks.install] depends //pkgs/core/examples:install [tasks.test] depends install run #!/usr/bin/env bash test $(node ./example.js) true test $(node ./fp.js) true test $(node ./misc.js) true test $(node ./constants.js) true env { TZ UTC }执行逻辑逐条拆解tasks.install依赖工作区根目录的//pkgs/core/examples:install任务负责安装依赖并构建 date-fns 到dist/保证示例运行前包已就绪。tasks.test依赖 install随后依次运行四个脚本。因为每个脚本成功时输出truetest $(node ./example.js) true实际是在 shell 层断言输出值任何断言失败都会导致命令非零退出。env { TZ UTC }把进程时区固定为 UTC。这是一个关键实践——日期库的format等函数输出依赖本地时区统一TZ能保证断言在任何机器上都可复现。在已安装 mise 的环境中进入该目录执行mise run test或等价地逐个执行node example.js等命令即可验证示例通过手动运行时四个脚本应各自打印true。9. 落地到真实项目的建议导入风格选择追求 tree-shaking 与可读性选顶层命名导入import { format } from date-fns需要批量操作与管道组合时选date-fns/fp柯里化变体仅需少量常量用date-fns/constants。locale 按需引入始终从date-fns/locale子路径导入具体 locale配合打包器可避免全量 locale 进入产物。时区可复现性参考示例的TZUTC做法在 CI 与测试脚本中固定时区避免日期断言因运行环境时区不同而抖动。细粒度子路径需要单函数时可用date-fns/addDays、date-fns/format等最小入口v4 的exports映射已为每个函数提供独立子路径与esm/cjs示例中验证过的行为保持一致。10. 小结date-fns 在 Node.js ESM 下提供了完整的模块化能力顶层命名导入、命名空间导入、fp函数式入口、constants常量入口以及逐函数的子路径导入全部由exports条件导出映射统一支撑天然适配type: module工程且无需任何转译。结合官方示例中脚本输出布尔断言 mise 任务 固定 UTC 时区的运行模式你可以把同样的验证思路迁移到自己的项目中确保 ESM 集成稳定可靠。【免费下载链接】date-fns⏳ Modern JavaScript date utility library ⌛️项目地址: https://gitcode.com/gh_mirrors/da/date-fns创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表