基本工具
网络, +++ts, (中文)web, (中文)react, (中文)vue, (中文)uni模块。
📖
https://gancao-web.github.io/base-tools/ (中文(简体) )
🚀
安装
- 按需安装即可
- 5)\fs5\bord1\shad1\1chf0f0f0}你应该知道
// 通用TS/JS模块
npm i @base-web-kits/base-tools-ts
// Web 模块
npm i @base-web-kits/base-tools-web
// Uni 模块
npm i @base-web-kits/base-tools-uni
// React 模块
npm i @base-web-kits/base-tools-react
// Vue 模块
npm i @base-web-kits/base-tools-vue
空虚
// 通用TS/JS模块
import { toDayjs, getUrlParam, toMaskPhone } from '@base-web-kits/base-tools-ts';
// Web 模块
import { copyText, isPC, setCookie } from '@base-web-kits/base-tools-web';
// React 模块
import { useCountDown } from '@base-web-kits/base-tools-react';
// Vue 模块
import { useResizeObserver } from '@base-web-kits/base-tools-vue';
// Uni 模块
import { setBaseToolsConfig, chooseMedia, toPayWx } from '@base-web-kits/base-tools-uni';
setBaseToolsConfig({
pathHome: '/pages/tabbar/home/index',
pathLogin: '/pages/login/index',
pathWebview: '/pages/webview/index',
hostFile: 'https://xx.com/',
hostIcon: 'https://xx.com/xx/',
isTabBar: (url) => url.startsWith('/pages/tabbar/'),
isLogin: () => useUserStore().isLogin,
log: (level, data) => console.log({ level, data }),
});
页:1
<!DOCTYPE html>
<html>
<head>
<title>Base Tools 示例</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/@base-web-kits/[email protected]/dist/base-tools-ts.umd.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@base-web-kits/[email protected]/dist/base-tools-web.umd.global.js"></script>
<script>
// 使用 base-tools-ts 中的函数
const { createTimeRandId, EventBus } = baseToolsTS;
// 使用 base-tools-web 中的函数
const { getCookie, setCookie } = baseToolsWeb;
// 示例：创建随机ID
const id = createTimeRandId();
console.log('随机ID:', id);
// 示例：使用EventBus
const emitter = new EventBus();
emitter.on('test', (data) => {
console.log('收到事件:', data);
});
emitter.emit('test', 'Hello World!');
// 示例：操作Cookie
setCookie('name', 'Base Tools', 7);
const name = getCookie('name');
console.log('Cookie值:', name);
</script>
</body>
</html>
AI(技能)
AI Skill, 可让 Cursor, Trae-Claude Code ^ AI 助手深度理解 @base-web-kits 的能力,为您精准推荐最佳实践函数,并自动处理依赖安装。。
翻译:
大多数项目会安装 @base-web-kits/base-tools-ts。从1.5.0苏克特探员 AGENTS.md数字 :
- 新增或选用可跨业务复用的 TS/JS 工具、浏览器与 H5 能力、React Hooks、Vue 组合式函数、uni-app 能力或公共类型前，读取 `node_modules/@base-web-kits/base-tools-ts/skill/SKILL.md`，检索已有能力；业务专属逻辑和领域类型不触发。
技术
若项目没有安装 @base-web-kits/base-tools-ts,技能:
npx skills add gancao-web/base-tools
验证生效
爱尔 @base-web-kits 下的相关包或函数,说明配置已生效。。
| 测试场景 | 推荐提问 | ^ 大赦国际 ^ |
|---|---|---|
| JSQQ(联合提交的材料) | "我需要深拷贝一个对象,请编写或推荐一个函数" | 推荐使用 base-tools-ts CHE (英语) cloneDeep |
| JSQQ(联合提交的材料) | "我需要校验邮箱格式,请编写或推荐一个函数" | 推荐使用 base-tools-ts CHE (英语) isEmail |
| 网络 | "我需要复制文本到剪贴板,请编写或推荐一个函数" | 推荐使用 base-tools-web CHE (英语) copyText |
| 反应活化 | "嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿" | 推荐使用 base-tools-react CHE (英语) useSize |
| Vuehu 语录 | "我需要监听元素外部点击事件,请编写或推荐一个函数" | 推荐使用 base-tools-vue CHE (英语) onClickOutside |
| UniAppash 软件 | "我需要保存网络图片到系统相册,请编写或推荐一个函数" | 推荐使用 base-tools-uni CHE (英语) saveImageToPhotosAlbum • |
兼容性
本工具库和相关依赖可能涉及的新特性及其最低兼容版本:
| (单位:千美元) | ES 版本 | (浏览器/操作系统) |
|---|---|---|
| 对象.值 / 条目 | ES2017 (英语) | Chrome 54+,iOS 10.3+,Android 7.0+ |
| 字符串. padStart / 后端 | ES2017 (英语) | Chrome 57+, iOS 10.3+, Android 8.0+ |
| 对象. get Own 产品描述符 | ES2017 (英语) | Chrome 54+,iOS 10.3+,Android 7.0+ |
| 保证 原型 终于 | ES2018 (英语) | Chrome 63+,iOS 11.3+,Android 9.0+ |
| 符号. 同步器 | ES2018 (英语) | Chrome 63+, iOS 12.0+, 安卓 9.0+ |
| 来自企业的对象 | ES2019 (英语) | Chrome 73+,iOS 12.2+,Android 10+ |
| 平面图 | ES2019 (英语) | Chrome 69+, iOS 12.0+, 安卓 9.0+ |
| String. prototype.trimStart / trimEnd (中文(简体) ) | ES2019 (英语) | Chrome 66+,iOS 12.0+,Android 9.0+ (英语) |
?? 编号 : ?. | ES2020 (英语) | Chrome 80+,iOS 13.4+,Android 10+ |
| 答应我,都解决了 | ES2020 (英语) | Chrome 76+,iOS 13.0+,Android 10+ |
| 弦乐. prototype. match All | ES2020 (英语) | Chrome 80+,iOS 13.0+,Android 10+ |
| 大点 | ES2020 (英语) | Chrome 67+,iOS 14.0+,Android 11+ (英语) |
| 全球 | ES2020 (英语) | Chrome 71+,iOS 12.2+,Android 9.0+ |
| 字符串 原型 全部替换 | ES2021 (英语) | Chrome 85+,iOS 13.4+,Android 11+ |
| 答应我 任何 | ES2021 (英语) | Chrome 85+,iOS 14.0+,Android 11+ |
| 弱参考/定稿 | ES2021 (英语) | Chrome 84+,iOS 14.5+,Android 11+ |
| 阵列/ String. prototype.at | ES2022 (英语) | Chrome 92+,iOS 15.4+,Android 12+ |
| 错误。 原型。 因为 | ES2022 (英语) | Chrome 93+,iOS 15.0+,Android 12+ |
| 对象. hasOwn | ES2022 (英语) | Chrome 93+,iOS 15.4+,Android 12+ |
本工具库构建目标为 ES2015+ (英语)(原始内容存档于2019-10-21) (英语). Polyfill, 如需支持低版本浏览器, 请务必在项目中配置。
配置 多元填充
• Vite QQ, 空虚 @vitejs/plugin-legacy 插件自动按需注入多填。
// vite.config.ts
import legacy from '@vitejs/plugin-legacy'; // 安装命令: npm install -D @vitejs/plugin-legacy
export default {
plugins: [
legacy({
// 与antd4兼容性对齐 https://4x-ant-design.antgroup.com/docs/react/introduce-cn
// targets: ['defaults', 'not IE 11'],
// 与vant4兼容性对齐 https://vant4.ylhtest.com/#/zh-CN/home
// targets: ['chrome >= 51', 'android >= 5', 'ios >= 10'],
// 与Element对齐: https://element-plus.org/zh-CN/guide/installation
targets: ['Chrome >= 64', 'Edge >= 79', 'Firefox >= 78', 'Safari >= 12', 'not IE 11'],
// 按需自动引入polyfill (需使用vite3以上版本,因为vite2.x缺少新的ES特性,如Object.hasOwn)
modernPolyfills: true,
}),
],
};