vite-plugin-dayjs 0.0.2 → 1.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +176 -3
  2. package/README.zh-CN.md +178 -0
  3. package/dist/index.mjs +16 -8
  4. package/package.json +4 -2
package/README.md CHANGED
@@ -1,5 +1,178 @@
1
- # Vue 3 + TypeScript + Vite
1
+ # vite-plugin-dayjs
2
2
 
3
- This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
3
+ [![npm version](https://img.shields.io/npm/v/vite-plugin-dayjs.svg)](https://www.npmjs.com/package/vite-plugin-dayjs)
4
+ [![License](https://img.shields.io/npm/l/vite-plugin-dayjs.svg)](https://github.com/antdv-next/vite-plugin-dayjs/blob/main/LICENSE)
4
5
 
5
- Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
6
+ [简体中文](./README.zh-CN.md)
7
+
8
+ A Vite plugin that automatically converts Day.js CommonJS imports to ESM format for better tree-shaking and build optimization.
9
+
10
+ ## ✨ Features
11
+
12
+ - 🚀 **Auto Transform**: Automatically redirects `dayjs` imports to `dayjs/esm`
13
+ - 🔌 **Plugin Support**: Supports multiple import styles for all Day.js plugins
14
+ - 🌍 **Locale Support**: Supports Day.js locale packages
15
+ - 📦 **Smaller Bundle**: Leverage ESM tree-shaking capabilities
16
+ - 💪 **TypeScript**: Full TypeScript support
17
+ - ⚡ **Zero Config**: Works out of the box, no configuration needed
18
+
19
+ ## 📦 安装
20
+
21
+ ```bash
22
+ # npm
23
+ npm install vite-plugin-dayjs -D
24
+
25
+ # yarn
26
+ yarn add vite-plugin-dayjs -D
27
+
28
+ # pnpm
29
+ pnpm add vite-plugin-dayjs -D
30
+ ```Usage
31
+
32
+ Add the plugin to your `vite.config.ts`:
33
+
34
+ 在 `vite.config.ts` 中添加插件：
35
+
36
+ ```ts
37
+ import { defineConfig } from 'vite'
38
+ import vitePluginDayjs from 'vite-plugin-dayjs'
39
+
40
+ export default defineConfig({
41
+ plugins: [
42
+ vitePluginDayjs(),
43
+ ],
44
+ })
45
+ Then use Day.js as usual:
46
+
47
+ 然后正常使用 Day.js：
48
+
49
+ ```ts
50
+ import dayjs from 'dayjs'
51
+ import relativeTime from 'dayjs/plugin/relativeTime'
52
+ import 'dayjs/locale/zh-cn'
53
+
54
+ dayjs.extend(relativeTime)
55
+ dayjs.locale('zh-cn')
56
+
57
+ console.log(dayjs().format('YYYY-MM-DD'))
58
+ console.log(dayjs().subtract(1, 'day').fromNow())
59
+ ```
60
+
61
+ ## 📖 How It Works
62
+
63
+ The plugin automatically transforms the following imports:
64
+
65
+ ### 1. Day.js Core
66
+
67
+ ```ts
68
+ // Original import
69
+ import dayjs from 'dayjs'
70
+
71
+ // Transformed to
72
+ import dayjs from 'dayjs/esm'
73
+ ```
74
+
75
+ ### 2. Day.js Plugins
76
+
77
+ Supports multiple import formats:
78
+
79
+ ```ts
80
+ // Format 2: With .js extension
81
+ import advancedFormat from 'dayjs/plugin/advancedFormat.js'
82
+ // Transforms to: dayjs/esm/plugin/relativeTime
83
+
84
+ // Format 1: Without extension
85
+ import relativeTime from 'dayjs/plugin/relativeTime'
86
+ // Transforms to: dayjs/esm/plugin/advancedFormat/index.js
87
+ ```
88
+
89
+ ### 3. Day.js Locales
90
+
91
+ Supports multiple import formats:
92
+
93
+ ```ts
94
+ // Format 1: Without extension
95
+ import 'dayjs/locale/zh-cn'
96
+ // Transforms to: dayjs/esm/locale/zh-cn
97
+
98
+ // Format 2: With .js extension
99
+ import 'dayjs/locale/es.js'
100
+ // Transforms to: dayjs/esm/locale/es.js
101
+ ```
102
+
103
+ ## 🎯 Supported Day.js Plugins
104
+
105
+ All official Day.js plugins are supported, including but not limited to:
106
+
107
+ - `advancedFormat` - Advanced formatting
108
+ - `customParseFormat` - Custom parsing format
109
+ - `duration` - Duration
110
+ - `isBetween` - Check if a date is between two dates
111
+ - `isSameOrAfter` / `isSameOrBefore` - Date comparison
112
+ - `relativeTime` - Relative time
113
+ - `timezone` - Timezone support
114
+ - `utc` - UTC time
115
+ - And more...
116
+
117
+ ## 🌍 Supported Locales
118
+
119
+ All official Day.js locales are supported, including but not limited to:
120
+
121
+ - `zh-cn` - Simplified Chinese
122
+ - `zh-tw` - Traditional Chinese
123
+ - `en` - English
124
+ - `es` - Spanish
125
+ - `fr` - French
126
+ - `ja` - Japanese
127
+ - `ko` - Korean
128
+ - And more...
129
+
130
+ ## 🔧 Configuration
131
+
132
+ Zero configuration required. The plugin works out of the box.
133
+
134
+ ## 🤔 Why This Plugin?
135
+
136
+ Day.js uses CommonJS format by default, which causes issues in modern build tools:
137
+
138
+ 1. **No tree-shaking**: Unused code will be included in the bundle
139
+ 2. **Larger bundle size**: Contains unnecessary dependencies
140
+ 3. **Poor loading performance**: CommonJS modules are less efficient
141
+
142
+ Using ESM format provides:
143
+
144
+ - ✅ Better tree-shaking support
145
+ - ✅ Smaller bundle size
146
+ - ✅ Faster loading speed
147
+ - ✅ Better code splitting
148
+
149
+ ## 📝 Examples
150
+
151
+ See [tests/dayjs.test.ts](./tests/dayjs.test.ts) for more usage examples.
152
+
153
+ ## 🧪 Testing
154
+
155
+ ```bash
156
+ # Run tests
157
+ pnpm test
158
+
159
+ # Development mode
160
+ pnpm dev
161
+
162
+ # Build
163
+ pnpm build
164
+ ```
165
+
166
+ ## 📄 License
167
+
168
+ [MIT](./LICENSE)
169
+
170
+ ## 🤝 Contributing
171
+
172
+ Issues and Pull Requests are welcome!
173
+
174
+ ## 🔗 Links
175
+
176
+ - [Day.js Documentation](https://day.js.org/)
177
+ - [Vite Documentation](https://vitejs.dev/)
178
+ - [GitHub Repository](https://github.com/antdv-next/vite-plugin-dayjs)
package/README.zh-CN.md ADDED
@@ -0,0 +1,178 @@
1
+ # vite-plugin-dayjs
2
+
3
+ [![npm version](https://img.shields.io/npm/v/vite-plugin-dayjs.svg)](https://www.npmjs.com/package/vite-plugin-dayjs)
4
+ [![License](https://img.shields.io/npm/l/vite-plugin-dayjs.svg)](https://github.com/antdv-next/vite-plugin-dayjs/blob/main/LICENSE)
5
+
6
+ [English](./README.md)
7
+
8
+ 一个 Vite 插件，自动将 Day.js 的 CommonJS 导入转换为 ESM 格式，提供更好的 tree-shaking 和构建优化。
9
+
10
+ ## ✨ 特性
11
+
12
+ - 🚀 **自动转换**：自动将 `dayjs` 导入重定向到 `dayjs/esm`
13
+ - 🔌 **插件支持**：支持所有 Day.js 插件的多种导入方式
14
+ - 🌍 **多语言支持**：支持 Day.js 的 locale 多语言包
15
+ - 📦 **更小的打包体积**：利用 ESM 的 tree-shaking 特性
16
+ - 💪 **TypeScript 支持**：完整的类型定义
17
+ - ⚡ **零配置**：开箱即用，无需额外配置
18
+
19
+ ## 📦 安装
20
+
21
+ ```bash
22
+ # npm
23
+ npm install vite-plugin-dayjs -D
24
+
25
+ # yarn
26
+ yarn add vite-plugin-dayjs -D
27
+
28
+ # pnpm
29
+ pnpm add vite-plugin-dayjs -D
30
+ ```
31
+
32
+ ## 🚀 使用
33
+
34
+ 在 `vite.config.ts` 中添加插件：
35
+
36
+ ```ts
37
+ import { defineConfig } from 'vite'
38
+ import vitePluginDayjs from 'vite-plugin-dayjs'
39
+
40
+ export default defineConfig({
41
+ plugins: [
42
+ vitePluginDayjs(),
43
+ ],
44
+ })
45
+ ```
46
+
47
+ 然后正常使用 Day.js：
48
+
49
+ ```ts
50
+ import dayjs from 'dayjs'
51
+ import relativeTime from 'dayjs/plugin/relativeTime'
52
+ import 'dayjs/locale/zh-cn'
53
+
54
+ dayjs.extend(relativeTime)
55
+ dayjs.locale('zh-cn')
56
+
57
+ console.log(dayjs().format('YYYY-MM-DD'))
58
+ console.log(dayjs().subtract(1, 'day').fromNow())
59
+ ```
60
+
61
+ ## 📖 工作原理
62
+
63
+ 该插件会自动转换以下导入：
64
+
65
+ ### 1. Day.js 核心库
66
+
67
+ ```ts
68
+ // 原始导入
69
+ import dayjs from 'dayjs'
70
+
71
+ // 自动转换为
72
+ import dayjs from 'dayjs/esm'
73
+ ```
74
+
75
+ ### 2. Day.js 插件
76
+
77
+ 支持多种导入格式：
78
+
79
+ ```ts
80
+ // 方式 2：带 .js 扩展名
81
+ import advancedFormat from 'dayjs/plugin/advancedFormat.js'
82
+ // 转换为: dayjs/esm/plugin/relativeTime
83
+
84
+ // 方式 1：不带扩展名
85
+ import relativeTime from 'dayjs/plugin/relativeTime'
86
+ // 转换为: dayjs/esm/plugin/advancedFormat/index.js
87
+ ```
88
+
89
+ ### 3. Day.js 多语言包
90
+
91
+ 支持多种导入格式：
92
+
93
+ ```ts
94
+ // 方式 1：不带扩展名
95
+ import 'dayjs/locale/zh-cn'
96
+ // 转换为: dayjs/esm/locale/zh-cn
97
+
98
+ // 方式 2：带 .js 扩展名
99
+ import 'dayjs/locale/es.js'
100
+ // 转换为: dayjs/esm/locale/es.js
101
+ ```
102
+
103
+ ## 🎯 支持的 Day.js 插件
104
+
105
+ 所有 Day.js 官方插件都支持，包括但不限于：
106
+
107
+ - `advancedFormat` - 高级格式化
108
+ - `customParseFormat` - 自定义解析格式
109
+ - `duration` - 持续时间
110
+ - `isBetween` - 区间判断
111
+ - `isSameOrAfter` / `isSameOrBefore` - 日期比较
112
+ - `relativeTime` - 相对时间
113
+ - `timezone` - 时区支持
114
+ - `utc` - UTC 时间
115
+ - 以及更多...
116
+
117
+ ## 🌍 支持的语言包
118
+
119
+ 支持所有 Day.js 官方语言包，包括但不限于：
120
+
121
+ - `zh-cn` - 简体中文
122
+ - `zh-tw` - 繁体中文
123
+ - `en` - 英语
124
+ - `es` - 西班牙语
125
+ - `fr` - 法语
126
+ - `ja` - 日语
127
+ - `ko` - 韩语
128
+ - 以及更多...
129
+
130
+ ## 🔧 配置选项
131
+
132
+ 目前插件为零配置设计，无需任何配置即可使用。
133
+
134
+ ## 🤔 为什么需要这个插件？
135
+
136
+ Day.js 默认使用 CommonJS 格式，这在现代构建工具中会导致：
137
+
138
+ 1. **无法 tree-shaking**：打包后会包含未使用的代码
139
+ 2. **打包体积更大**：包含不必要的依赖
140
+ 3. **加载性能差**：CommonJS 模块加载效率较低
141
+
142
+ 使用 ESM 格式可以：
143
+
144
+ - ✅ 更好的 tree-shaking 支持
145
+ - ✅ 更小的打包体积
146
+ - ✅ 更快的加载速度
147
+ - ✅ 更好的代码分割
148
+
149
+ ## 📝 示例
150
+
151
+ 查看 [tests/dayjs.test.ts](./tests/dayjs.test.ts) 了解更多使用示例。
152
+
153
+ ## 🧪 测试
154
+
155
+ ```bash
156
+ # 运行测试
157
+ pnpm test
158
+
159
+ # 开发模式
160
+ pnpm dev
161
+
162
+ # 构建
163
+ pnpm build
164
+ ```
165
+
166
+ ## 📄 许可证
167
+
168
+ [MIT](./LICENSE)
169
+
170
+ ## 🤝 贡献
171
+
172
+ 欢迎提交 Issue 和 Pull Request！
173
+
174
+ ## 🔗 相关链接
175
+
176
+ - [Day.js 官方文档](https://day.js.org/)
177
+ - [Vite 官方文档](https://vitejs.dev/)
178
+ - [GitHub 仓库](https://github.com/antdv-next/vite-plugin-dayjs)
package/dist/index.mjs CHANGED
@@ -9,14 +9,6 @@ function vitePluginDayjs() {
9
9
  skipSelf: true,
10
10
  ...options
11
11
  });
12
- const pluginIndex = source.match(/^dayjs\/plugin\/([^/]+)\/index\.js$/);
13
- if (pluginIndex) {
14
- const target = `dayjs/esm/plugin/${pluginIndex[1]}/index.js`;
15
- return await this.resolve(target, importer, {
16
- skipSelf: true,
17
- ...options
18
- });
19
- }
20
12
  const pluginWithJs = source.match(/^dayjs\/plugin\/([^/]+)\.js$/);
21
13
  if (pluginWithJs) {
22
14
  const target = `dayjs/esm/plugin/${pluginWithJs[1]}/index.js`;
@@ -33,6 +25,22 @@ function vitePluginDayjs() {
33
25
  ...options
34
26
  });
35
27
  }
28
+ const localeWithJs = source.match(/^dayjs\/locale\/([^/]+)\.js$/);
29
+ if (localeWithJs) {
30
+ const target = `dayjs/esm/locale/${localeWithJs[1]}.js`;
31
+ return await this.resolve(target, importer, {
32
+ skipSelf: true,
33
+ ...options
34
+ });
35
+ }
36
+ const localeBare = source.match(/^dayjs\/locale\/([^/]+)$/);
37
+ if (localeBare) {
38
+ const target = `dayjs/esm/locale/${localeBare[1]}`;
39
+ return await this.resolve(target, importer, {
40
+ skipSelf: true,
41
+ ...options
42
+ });
43
+ }
36
44
  return null;
37
45
  }
38
46
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "vite-plugin-dayjs",
3
3
  "type": "module",
4
- "version": "0.0.2",
4
+ "version": "1.0.1",
5
5
  "exports": {
6
6
  ".": {
7
7
  "types": "./dist/index.d.mts",
@@ -20,6 +20,7 @@
20
20
  "@types/node": "^24.10.1",
21
21
  "@vitejs/plugin-vue": "^6.0.1",
22
22
  "@vue/tsconfig": "^0.8.1",
23
+ "bumpp": "^10.3.2",
23
24
  "dayjs": "^1.11.19",
24
25
  "eslint": "^9.39.2",
25
26
  "jiti": "^2.6.1",
@@ -35,6 +36,7 @@
35
36
  "build": "tsdown",
36
37
  "preview": "vite preview",
37
38
  "test": "vitest run",
38
- "prepublish": "pnpm build"
39
+ "prepublish": "pnpm build",
40
+ "bump": "bumpp"
39
41
  }
40
42
  }