Day.js 项目中类型导入问题的解决方案

问题背景

在 Svelte 和 SvelteKit 项目升级过程中，开发者在使用 Day.js 日期处理库时遇到了一个常见的模块导入问题。具体表现为控制台报错"Named export 'Dayjs' not found"，提示 Day.js 是一个 CommonJS 模块，可能不支持所有模块导出作为命名导出。

问题分析

这个错误通常发生在 TypeScript 或现代 JavaScript 项目中，当开发者尝试从 CommonJS 模块中导入类型定义时。Day.js 虽然提供了类型定义，但其模块系统是基于 CommonJS 的，与 ESM (ECMAScript Modules) 的导入方式有所不同。

解决方案

正确的导入方式应该是使用 TypeScript 的 type 关键字来明确指定我们导入的是一个类型而非值：

// 错误的方式
import { Dayjs } from 'dayjs'

// 正确的方式
import { type Dayjs } from 'dayjs'

技术原理

1. CommonJS 与 ESM 的区别：CommonJS 使用 module.exports 导出模块，而 ESM 使用 export 关键字。TypeScript 在处理这两种模块系统时需要不同的导入语法。

2. 类型导入的特殊性：当导入的内容仅用于类型注解时，应该使用 type 修饰符。这告诉 TypeScript 编译器这些导入只在类型检查阶段需要，不会出现在运行时代码中。

3. 构建工具兼容性：Vite 等现代构建工具对 ESM 有更好的支持，明确区分类型导入有助于构建工具正确打包代码。

最佳实践

1. 对于 Day.js 这样的库，如果只需要类型定义，始终使用 type 修饰符
2. 在 TypeScript 配置中确保 "importsNotUsedAsValues": "error" 或 "verbatimModuleSyntax": true 来捕获这类问题
3. 对于混合使用类型和值的导入，可以分开处理：

   import dayjs from 'dayjs'
   import { type Dayjs } from 'dayjs'
   

总结

在 TypeScript 项目中处理 CommonJS 模块的类型导入时，明确区分类型导入和值导入是避免构建错误的关键。Day.js 作为流行的日期处理库，虽然模块系统基于 CommonJS，但通过正确的类型导入语法，可以无缝地在现代前端项目中使用。