SpiderTools - 前端通用工具库

一个功能丰富的前端工具库，提供数组、字符串、日期、HTTP、存储、验证、数学计算等常用工具函数。

安装

npm install spidertools
# 或
yarn add spidertools
# 或
pnpm add spidertools

🚀 按需导入支持

spidertools 支持多种导入方式，您可以根据项目需求选择最适合的方式：

方式 1: 完整导入

import * as spidertools from 'spidertools';

// 使用数组工具
spidertools.array.unique([1, 2, 2, 3]); // [1, 2, 3]
// 使用字符串工具
spidertools.string.capitalize('hello'); // 'Hello'

方式 2: 按需导入模块（推荐）

import * as arrayUtils from 'spidertools/array';
import * as stringUtils from 'spidertools/string';
import * as validateUtils from 'spidertools/validate';

arrayUtils.unique([1, 2, 2, 3]); // [1, 2, 3]
stringUtils.capitalize('hello'); // 'Hello'
validateUtils.isEmail('[email protected]'); // true

方式 3: 按需导入具体函数（最小体积）

import { unique, chunk } from 'spidertools/array';
import { capitalize, camelCase } from 'spidertools/string';
import { isEmail, isPhone } from 'spidertools/validate';

unique([1, 2, 2, 3]); // [1, 2, 3]
capitalize('hello'); // 'Hello'
isEmail('[email protected]'); // true

方式 4: 根级别导入常用函数

import { formatDate, get, LocalStorage, isEmail } from 'spidertools';

formatDate(new Date(), 'YYYY-MM-DD'); // '2024-01-01'
get(obj, 'user.name', 'Unknown'); // 安全获取嵌套属性
LocalStorage.set('key', 'value'); // 本地存储
isEmail('[email protected]'); // true

📊 打包体积对比

| 导入方式 | 估算体积 | 适用场景 | | ------------ | -------- | ---------------- | | 完整导入 | ~130KB | 需要使用多个模块 | | 按需导入模块 | ~15-25KB | 只使用特定模块 | | 按需导入函数 | ~5-15KB | 只使用少数函数 | | 根级别导入 | ~10-20KB | 使用常用函数 |

💡 建议: 在生产环境中推荐使用方式 2 或方式 3 来最小化打包体积

使用方法

1. 命名空间导入（推荐）

import {
  array,
  string,
  date,
  http,
  storage,
  validate,
  utils,
  math,
} from 'spidertools';

// 使用数组工具
const uniqueArray = array.unique([1, 2, 2, 3]);

// 使用字符串工具
const camelCased = string.camelCase('hello-world');

// 使用日期工具
const formatted = date.formatDate(new Date(), 'YYYY-MM-DD');

2. 直接导入常用函数

import { unique, camelCase, formatDate, debounce, isEmail } from 'spidertools';

const result = unique([1, 2, 2, 3]);
const text = camelCase('hello-world');
const dateStr = formatDate(new Date());

3. 默认导入（懒加载）

import spidertools from 'spidertools';

// 懒加载模块
const arrayModule = await spidertools.array();
const uniqueArray = arrayModule.default.unique([1, 2, 2, 3]);

4. 子模块默认导入

import arrayUtils from 'spidertools/array';
import stringUtils from 'spidertools/string';
import dateUtils from 'spidertools/date';

const uniqueArray = arrayUtils.unique([1, 2, 2, 3]);
const camelCased = stringUtils.camelCase('hello-world');
const formatted = dateUtils.formatDate(new Date());

模块说明

📦 Array（数组工具）

• unique - 数组去重
• chunk - 数组分块
• flatten - 数组扁平化
• shuffle - 数组随机排序
• groupBy - 数组分组

🔤 String（字符串工具）

• capitalize - 首字母大写
• camelCase - 驼峰命名转换
• kebabCase - 短横线命名转换
• snakeCase - 下划线命名转换
• truncate - 字符串截断
• template - 模板字符串替换
• 更多字符串处理功能...

📅 Date（日期工具）

• formatDate - 日期格式化
• getRelativeTime - 相对时间
• isSameDay - 判断是否同一天
• 更多日期处理功能...

🌐 HTTP（网络请求）

• get/post/put/delete - HTTP 请求方法
• uploadFile - 文件上传
• HttpClient - HTTP 客户端
• WebSocketConnection - WebSocket 连接

💾 Storage（存储工具）

• LocalStorage - 本地存储封装
• SessionStorage - 会话存储封装
• Cookie - Cookie 操作

✅ Validate（验证工具）

• isEmail - 邮箱验证
• isPhone - 手机号验证
• isUrl - URL 验证
• validatePassword - 密码强度验证
• 更多验证功能...

🔧 Utils（通用工具）

• debounce - 防抖函数
• throttle - 节流函数
• deepClone - 深拷贝
• generateId - 生成唯一ID
• 更多通用工具...

🔢 Math（数学工具）

• randomInt - 随机整数
• average - 平均值
• clamp - 数值限制
• 更多数学计算功能...

导出模式说明

本库采用统一的导出模式：

1. 具名导出：所有函数都支持具名导出
2. 命名空间导出：每个模块都有命名空间导出（export * as moduleName）
3. 默认导出：每个模块都提供默认导出，包含该模块的所有主要功能
4. 根级别导出：常用函数在根级别直接导出，方便快速使用
5. 懒加载支持：根模块的默认导出支持动态导入

📚 文档

我们提供了完整的在线文档，基于 Docusaurus 构建：

在线文档

• 开发环境: http://localhost:3000/spidertools/
• 生产环境: https://spidertools.github.io/spidertools/

本地查看文档

# 启动文档开发服务器
npm run docs:dev

# 构建文档
npm run docs:build

# 预览构建后的文档
npm run docs:serve

# 自动生成 API 文档
npm run docs:generate

文档特性

• 🔍 全文搜索 - 快速找到所需的 API
• 🌙 深色模式 - 支持明暗主题切换
• 📱 响应式设计 - 完美适配移动设备
• 💻 代码高亮 - 语法高亮和代码示例
• 🔗 交互式导航 - 清晰的模块分类和导航

开发

安装依赖：

pnpm install

构建库：

pnpm build

开发模式（监听文件变化）：

pnpm dev

运行测试：

• 运行所有测试：pnpm test
• 启动 Vitest UI 界面（可视化测试）：pnpm test:ui
• 监听模式运行测试：pnpm test:watch

发布流程

手动发布

# 1. 运行发布前检查
pnpm prepublish

# 2. 更新版本号
pnpm version patch   # 或 minor/major

# 3. 发布到 NPM
pnpm publish:npm

# 4. 推送标签
git push origin --tags

自动发布

推送版本标签到 GitHub 将自动触发发布流程：

git tag v1.0.0
git push origin v1.0.0

详细发布指南请参考 PUBLISH.md