Base Tools

Appearance

指南 ​

简介 ​

web前端团队常用工具库，包含ts、web、react、vue、uni模块。

安装 ​

  • 按需安装即可,模块之间不相互依赖
  • 非ts环境和普通h5也能使用,因为所有函数已编译为es5
js
// 通用 TS 模块
npm i @base-web-kits/base-tools-ts

// Web 模块
npm i @base-web-kits/base-tools-web

// React 模块
npm i @base-web-kits/base-tools-react

// Vue 模块
npm i @base-web-kits/base-tools-vue

// Uni 模块
npm i @base-web-kits/base-tools-uni

使用 ​

ts
// 通用 TS 模块
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 }),
});

普通h5 ​

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>

兼容性 ​

本工具库和相关依赖可能涉及的新特性及其最低兼容版本：

特性ES 版本最低兼容版本 (Browser/OS)
Array.prototype.includesES2016Chrome 47+, iOS 9+, Android 6.0+
Object.values / entriesES2017Chrome 54+, iOS 10.3+, Android 7.0+
String.prototype.padStart / padEndES2017Chrome 57+, iOS 10.3+, Android 8.0+
Object.getOwnPropertyDescriptorsES2017Chrome 54+, iOS 10.3+, Android 7.0+
Promise.prototype.finallyES2018Chrome 63+, iOS 11.3+, Android 9.0+
Async Iterator (Symbol.asyncIterator)ES2018Chrome 63+, iOS 12.0+, Android 9.0+
Object.fromEntriesES2019Chrome 73+, iOS 12.2+, Android 10+
Array.prototype.flat / flatMapES2019Chrome 69+, iOS 12.0+, Android 9.0+
String.prototype.trimStart / trimEndES2019Chrome 66+, iOS 12.0+, Android 9.0+
Promise.allSettledES2020Chrome 76+, iOS 13.0+, Android 10+
String.prototype.matchAllES2020Chrome 80+, iOS 13.0+, Android 10+
BigIntES2020Chrome 67+, iOS 14.0+, Android 11+
globalThisES2020Chrome 71+, iOS 12.2+, Android 9.0+
String.prototype.replaceAllES2021Chrome 85+, iOS 13.4+, Android 11+
Promise.anyES2021Chrome 85+, iOS 14.0+, Android 11+
WeakRef / FinalizationRegistryES2021Chrome 84+, iOS 14.5+, Android 11+
Array/String.prototype.atES2022Chrome 92+, iOS 15.4+, Android 12+
Error.prototype.causeES2022Chrome 93+, iOS 15.0+, Android 12+
Object.hasOwnES2022Chrome 93+, iOS 15.4+, Android 12+

本工具库构建目标为 ES2015+。但不内置 Polyfill, 如需支持低版本浏览器, 请务必在项目中配置 Polyfill。

配置 Polyfill ​

需经过两步:

  1. 配置打包工具, 将ES6+代码转换为ES5。
  2. 在入口文件顶部引入 core-js 进行 Polyfill。

以 Vite 项目为例:

  1. 使用 @vitejs/plugin-legacy 插件，将ES6+代码转换为ES5。
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'],

      renderLegacyChunks: true, // 必须开启, 确保生成 ES5 兼容包
      modernPolyfills: false, // 关闭按需注入polyfill, 因为legacy无法全量分析项目代码间接依赖了哪些新API, 需在入口文件 main.ts 全量引入 'core-js/stable'
    }),
  ],
};
  1. 入口文件 main.ts 顶部引入 core-js/stable 进行 Polyfill
ts
import 'core-js/stable'; // 安装命令: npm install core-js

Last updated: