前端模块化 JavaScript 工具库
npm install @ivu-plus/i-utilsTypescript 导入,
字符串,数组,数学,文件,数学,文件,加解密算法,脱敏,分页,
浏览器 Cookie,浏览器 Clipboard,浏览器 Dom,微信小程序工具等多个模块,同时支持es模块化、umd浏览器环境、
require服务端环境,满足不同场景的开发需求,大幅提升开发效率。
bash
npm
npm i @ivu-plus/i-utils --save
pnpm
pnpm i @ivu-plus/i-utils --save
yarn
yarn add @ivu-plus/i-utils --save
`
$3
#### es 模块环境
`javascript
// 按需引入
import { testLoaded } from "@ivu-plus/i-utils";
testLoaded();
// 全量引入
import * as iUtils from "@ivu-plus/i-utils";
iUtils.testLoaded();
`
#### cjs 服务端环境
`javascript
// 全量引入
const iUtils = require("@ivu-plus/i-utils");
iUtils.testLoaded();
// 按需引入
const { testLoaded } = require("@ivu-plus/i-utils");
testLoaded();
`
#### umd 浏览器环境
直接使用打包好的 umd 的包,提供常规包和 min 压缩包
`html
`
还有一种是浏览器中使用 ESM 模块引入方式
`html
`
#### 自动导入
需要使用额外的插件来实现自动导入,IUtilsResolver解析器支持在 Vite 和 Webpack 工具中使用。
首先需要安装自动导入插件
`bash
pnpm install unplugin-auto-import -D
`
在 vite.config.ts 中使用
`javascript
import { defineConfig } from "vite";
import AutoImport from "unplugin-auto-import/vite";
import { IUtilsResolver } from "@ivu-plus/i-utils/resolver";
export default defineConfig({
plugins: [
AutoImport({
resolvers: [IUtilsResolver()],
}),
],
});
`
在 webpack.config.js 中使用
`javascript
const AutoImport = require("unplugin-auto-import/webpack");
const { IUtilsResolver } = require("@ivu-plus/i-utils/resolver");
module.exports = {
plugins: [
AutoImport({
resolvers: [IUtilsResolver()],
}),
],
};
`
解析器提供 3 种场景
`javascript
// 场景1:默认加载所有方法
IUtilsResolver();
// 场景2:追加指定方法名
IUtilsResolver(["getDate"]);
// 场景3:精细化控制(排除/只包含/追加)
IUtilsResolver({
include: ["getUUID", "getGUID"],
exclude: ["testLoaded"],
append: ["formatDate"],
});
`
$3
工具库源码架构使用 pnpm 做为包管理工具,支持 Typescript 类型导入,打包后生成es、cjs、umd包。
`bash
构建包
pnpm build
`
$3
`bash
npm publish
`
$3
常量集合 Constant
字符串
数字
数组
对象
函数
日期
数学
正则
随机数
文件
颜色
校验
键盘
生成id
加解密算法
脱敏
身份证号码
分页
浏览器 Url
浏览器 Cookie
浏览器 Storage
浏览器 Dom
浏览器 Device
浏览器 Clipboard
微信小程序工具
$3
#### 😝 主要
fix: 修复 bug
add: 增加功能
del: 删除功能
update: 更新功能
#### 😉 次要
docs: 文档更新
merge: 合并分支
style: 颜色、字体大小等变动(不影响代码运行)
build: 构造工具或相关依赖变更
refactor: 代码重构
revert: 撤销,版本回退
#### 😳 一般
test: 添加或修改测试
perf: 提高性能的改动
chore: 构建过程或辅助工具的变更
ci: CI 配置,脚本文件等改动
`bash
后面英文冒号,并且后跟一个空格
git commit -m ():
举个栗子
git commit -m 'fix: 修复了xxx问题'
git commit -m 'fix(string): 修复了string工具类的xxx问题'
git commit -m 'docs: 更新了字符串模块文档'
``