# @base-web-kits/base-tools-web 中文文档

规范地址：https://npmcn.com/package/%40base-web-kits/base-tools-web/

版本：2\.1\.4
npm 元数据更新时间：2026-11-02T08:55:00.512Z
中文译文更新时间：2026-11-07T22:44:47.207Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40base-web-kits/base-tools-web
原文对照：https://npmcn.com/package/%40base-web-kits/base-tools-web/?lang=original

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：1.4 MB，91 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：2 个
- 首次发布：2025-11-13T02:15:05.319Z
- 最新版本发布：2026-11-02T08:55:00.023Z
- 近 30 天下载量：2167（2026-10-08 至 2026-11-06，npm 官方下载统计）
- 已发布版本数：104（近 12 个月 104 个）

## 中文简介

通过src/web构建的独立Web公用事业软件包.

## 安装

```sh
npm install @base-web-kits/base-tools-web
```

也可以使用：`pnpm add @base-web-kits/base-tools-web`、`yarn add @base-web-kits/base-tools-web`、`bun add @base-web-kits/base-tools-web`

## README

# 基本工具

网络, +++`ts`, (中文)`web`, (中文)`react`, (中文)`vue`, (中文)`uni`模块。

## 📖

[https://gancao-web.github.io/base-tools/ (中文(简体) )](https://gancao-web.github.io/base-tools/)

## 🚀

### 安装

-   按需安装即可
-   5)\\fs5\\bord1\\shad1\\1chf0f0f0}你应该知道

```js
// 通用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
// 通用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

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Base Tools 示例</title>
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/@base-web-kits/base-tools-ts@1.0.0/dist/base-tools-ts.umd.global.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@base-web-kits/base-tools-web@1.0.0/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`数字 :

```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`,技能:

```bash
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` 插件自动按需注入多填。

```ts
// 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,
    }),
  ],
};
```

## 常见问题

### @base-web-kits/base-tools-web 是什么？

通过src/web构建的独立Web公用事业软件包\.

### 如何安装 @base-web-kits/base-tools-web？

在项目目录运行 npm install @base-web-kits/base-tools-web，或使用 pnpm add / yarn add / bun add。

### @base-web-kits/base-tools-web 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @base-web-kits/base-tools-web 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @base-web-kits/base-tools-web 可以商用吗？

@base-web-kits/base-tools-web 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @base-web-kits/base-tools-web 的下载量有多少？

根据 npm 官方下载统计，@base-web-kits/base-tools-web 在 2026/10/08 – 2026/11/06 这 30 天内被下载 2,167 次，日均约 72 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @base-web-kits/base-tools-web 还在维护吗？

最新版本 2\.1\.4 发布于 2026/11/02（6 天前）；至今共发布 104 个版本，其中过去 12 个月发布了 104 个；首次发布于 2025/11/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。