轻量实用的TS日期工具库dtejs，npm+CDN双兼容，新手也能快速上手
轻量实用的TS日期工具库dtejs，npm+CDN双兼容，新手也能快速上手
文章目录
- 轻量实用的TS日期工具库dtejs，npm+CDN双兼容，新手也能快速上手
- 一、工具库核心亮点
- 二、两种引入方式（npm+CDN，按需选择）
- 方式1：npm安装（推荐模块化项目使用）
- 步骤1：安装依赖
- 步骤2：使用示例（TypeScript/JavaScript通用）
- 方式2：CDN直接引入（适合静态页面/非模块化项目）
- 步骤1：引入CDN（推荐jsdelivr，同步快、兼容性好）
- 三、核心API说明（简洁易懂，按需使用）
- 四、注意事项（避坑指南）
- 五、总结
在前端开发中，日期处理是高频需求，无论是格式化日期、计算相对时间，还是日期加减、比较，手动编写代码不仅繁琐，还容易出现兼容性问题。今天给大家推荐一款超轻量的TypeScript原生日期工具库——dtejs，体积小巧、API简洁，同时支持npm安装和CDN直接引入，适配各种开发场景，无需复杂配置就能快速上手。
一、工具库核心亮点
dtejs 作为一款专注于日期处理的工具库，没有多余依赖，基于TypeScript开发，类型提示完善，既能满足日常开发的所有日期需求，又能保证代码的可维护性，核心亮点如下：
超轻量无依赖：打包后UMD格式仅2.4kb，引入后不会增加项目体积负担，无需担心冗余代码；
TypeScript原生支持：全程TS开发，自带完整类型声明，使用时IDE自动提示API，减少语法错误；
双场景兼容：同时支持npm安装（适配Vue、React、Node等模块化项目）和CDN直接引入（适配静态页面、老项目、小程序等非模块化场景）；
功能全面且简洁：涵盖日期格式化、相对时间计算、日期加减、日期比较、时间戳获取等常用功能，API设计简洁，上手成本极低；
多语言兼容：支持中文、英文两种语言的相对时间展示，满足不同项目的国际化需求。
二、两种引入方式（npm+CDN，按需选择）
dtejs 最实用的一点就是双引入方式，无论是现代模块化项目，还是传统静态页面，都能轻松适配，下面分别介绍具体操作步骤。
方式1：npm安装（推荐模块化项目使用）
适合Vue、React、Node.js等支持npm包管理的项目，安装后可按需引入API，按需使用。
步骤1：安装依赖
打开终端，执行以下命令安装最新版本的dtejs（支持npm/yarn/pnpm）：
# npm安装npminstall@dongxiang678/dtejs@latest# yarn安装yarnadd@dongxiang678/dtejs@latest# pnpm安装pnpmadd@dongxiang678/dtejs@latest步骤2：使用示例（TypeScript/JavaScript通用）
安装完成后，可按需引入核心API，无需全局引入，减少冗余：
// 1. 按需引入API（推荐）import{Dte,format,fromNow}from'@dongxiang678/dtejs';// 2. 日期格式化（支持多种模板）console.log(format(newDate(),'YYYY-MM-DD HH:mm:ss'));// 输出：2026-03-21 19:30:00console.log(format(newDate(),'YYYY年MM月DD日'));// 输出：2026年03月21日// 3. 相对时间计算（中文/英文可选）console.log(fromNow(Date.now()-5*60*1000));// 输出：5分钟前（中文）console.log(fromNow(Date.now()+3*24*3600*1000,'en-US'));// 输出：3 days later（英文）// 4. 日期加减（支持天、小时、分钟等单位）constnextDay=newDte().add(1,'day').format('YYYY-MM-DD');// 明天日期constlastHour=newDte().add(-1,'hour').format('HH:mm:ss');// 1小时前// 5. 日期比较（返回1=大于，-1=小于，0=等于）console.log(Dte.compare('2026-03-21','2026-03-20'));// 输出：1// 6. 时间戳获取（秒级/毫秒级可选）console.log(newDte().timestamp('s'));// 秒级时间戳console.log(newDte().timestamp());// 毫秒级时间戳（默认）方式2：CDN直接引入（适合静态页面/非模块化项目）
适合传统静态HTML页面、小程序、老项目等不支持npm包管理的场景，无需安装依赖，直接通过script标签引入即可使用，全局变量为dtejs。
步骤1：引入CDN（推荐jsdelivr，同步快、兼容性好）
在HTML文件中引入CDN链接，推荐使用指定版本（避免版本更新导致兼容问题）：
<!DOCTYPEhtml><htmllang="zh-CN"><head><meta charset="UTF-8"><title>dtejs CDN使用示例</title><!-- 引入dtejs CDN（指定1.0.3版本，可替换为最新版本） --><scripttype="text/javascript"src="https://cdn.jsdelivr.net/npm/@dongxiang678/dtejs@1.0.3/dist/dtejs.umd.js"></script></head><body><script>// 直接通过全局变量dtejs调用API，无需引入console.log('格式化日期：',dtejs.format(newDate(),'YYYY-MM-DD'));console.log('5分钟前：',dtejs.fromNow(Date.now()-5*60*1000));console.log('明天日期：',newdtejs.Dte().add(1,'day').format('YYYY-MM-DD'));</script></body></html>也可使用unpkg CDN（备用）：
<scripttype="text/javascript"src="https://unpkg.com/@dongxiang678/dtejs@1.0.3/dist/dtejs.umd.js"></script>三、核心API说明（简洁易懂，按需使用）
dtejs 的API设计非常简洁，无需复杂配置，核心API如下，轻松覆盖日常日期处理需求：
| API名称 | 用法说明 | 示例 |
|---|---|---|
| format | 日期格式化，支持多种模板（YYYY/MM/DD/HH/mm/ss等） | format(new Date(), ‘YYYY-MM-DD’) |
| fromNow | 计算相对时间，支持中文（默认）、英文 | fromNow(Date.now() - 3600000, ‘en-US’) |
| Dte.add | 日期加减，支持day/hour/minute/second等单位 | new Dte().add(7, ‘day’)（7天后） |
| Dte.compare | 日期比较，返回1（大于）、-1（小于）、0（等于） | Dte.compare(‘2026-03-21’, ‘2026-03-20’) |
| Dte.timestamp | 获取时间戳，默认毫秒级，传’s’获取秒级 | new Dte().timestamp(‘s’) |
四、注意事项（避坑指南）
CDN引入时，建议指定具体版本（如@1.0.3），避免版本更新导致API变更；
npm安装后，若使用TypeScript，无需额外配置，自带类型声明，可直接使用；
日期模板区分大小写，YYYY（4位年份）、MM（2位月份）、DD（2位日期），不可写错；
相对时间计算时，英文参数为’en-US’，中文无需传参（默认中文）。
五、总结
dtejs 作为一款轻量、简洁、实用的日期工具库，完美解决了日常开发中的日期处理痛点。无论是模块化项目的npm安装，还是静态页面的CDN引入，都能轻松适配，TypeScript类型提示让开发更高效，无需编写繁琐的日期处理代码，大大提升开发效率。
如果你的项目中需要处理日期格式化、相对时间、日期加减等需求，不妨试试dtejs，体积小、无依赖、上手快，绝对是前端开发的好帮手。
项目地址：https://github.com/dxiangwiki/dtejs
npm地址：https://www.npmjs.com/package/@dongxiang678/dtejs