cosmos-utils v1.1.0

Hello cosmos-utils!

背景

1. 每个团队自己维护的项目中都有自己的一套 utils，没有统一
2. 每个工具或多或少存在相同功能使用不同库的场景，代码冗余
3. 工具自己随意实现或者引入三方库，存在隐藏风险，内部逻辑不清晰，容易出现基础工具出错引发的线上问题

想法

1. 调研搭建一套基础工具库框架，实现工具自己开发，测试，部署，通知等一系列流程
2. 收集各个团队工具需求，整理初版要实现的功能点
3. 不断扩充已有工具和工具库，降低团队使用的工具的复杂性，提高工具可维护性

目标

1. 完成框架和测试用例等基础配置，完善工具说明文档，能够专注于工具的开发（2022.06 完成）当前已完成
2. 完善工具使用文档和设定目前需要完善的工具 list（7 月份完成）
3. 第一版本发布，包含至少十个基础工具（8 月份）
4. 9 月份拉着各个方向去列出各团队的工具 list，以及针对当前版本有问题的点优化（9 月份）
5. 确定对应的 list 优先级，以每个月两个工具进度迭代（持续）

cosmos-utils 是一个简单的工具库，用于帮助开发者快速使用一些基础工具，包含 url 处理，浏览器存储处理，数字计算，对象处理等一系列的基础工具

项目运行

$ npm i
$ npm start
# 构建文档
$ npm run docs:build
# 运行测试用例
$ npm test
# 进行构建，采用自带father-build构建
$ npm run build
# 发布包，目前发布收敛在@任亚楠，有疑问及时沟通
$ npm publish
# 预览，更多详细内容见package.json文件
$ npm run start

目录结构

• docs 组件库文档目录
  • index.md 组件库文档首页（如果不存在，会 fallback 到 根目录 README.md 文件）
  • guide 组件库文档其他路由
    • index.md
    • sample.md
    • help.md
• src 组件库源码目录，要新增的工具方法如果没有大类，应该新增一个对应的目录，否则就在对应的目录文件里面新增对应的方法即可
  • 组件库入口文件
  • Common 基础工具库
    • Utils.ts 基础工具方法
    • Variable.ts 常用基础变量
  • URL 工具大类
    • index.ts 组件源码
    • index.md 组件文档
    • index.less 组件样式
    • index.test.ts 组件测试用例
• .umirc.ts dumi 配置文件（也可以是 config/config.ts）
• .fatherrc .tsfather-build 的配置文件，用于组件库打包

更多详细的功能和配置详细见https://d.umijs.org/zh-CN/guide

项目中引入自己的包可以直接文档中写

import { URL } from 'cosmos-utils';

业务项目配置

默认情况下 babel-loader 会忽略所有 node_modules 中的文件。你需要进行对应的配置，以避免构建后的代码中出现未转译的第三方依赖。

不过，对所有的依赖都进行转译可能会降低构建速度。如果对构建性能有所顾虑，你可以只转译部分特定的依赖：给本选项传一个数组，列出需要转译的第三方包包名或正则表达式即可。

vue-cli

需要在 vue.config.js 中配置 transpileDependencies

Type: boolean | Array<string | RegExp>

Default: false

webpack

module: {
  rules: [
    {
      test: /\.m?js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}

上述的配置通过 exclude 过滤掉了 node_modules 目录，你可以使用方法将对应的包不做过滤，可以参考下面的配置

exclude: (path) => /node_modules/.test(path) && !/cosmos-utils/.test(path)

参考正则：/(node_modules[\/\\](?!cosmos-utils)|bower_components)/

顺便也需要做好对应的 tree-shanking 支持

rollup

原理同 webpack，要在 rollup.config.js 中进行对应的配置

plugins: [
  babel({
    extensions: [".js", ".ts"],
    exclude: "node_modules/**"
  })
];

exclude 的Type: Type: String | RegExp | Array[...String|RegExp]

参考正则：/(node_modules[\/\\](?!cosmos-utils)|bower_components)/

计划中的功能

1. 防抖截流（2022-09 完成）

2. object 数据类型相关操作（2022-08 完成）

• isEmpty：判断一个对象是否为空
• filter：过滤对象的属性，默认过滤出值为 undefined 和 null 的属性，可指定过滤内容
• json2arr：对象转换成数组

已完成的功能：

1. URL 相关操作（2022-05 完成）

• makeQuery：创建一个 URL 查询字符串
• parseQuery：解析一个 URL 查询字符串
• isValidUrl：判断一个 URL 是否有效
• parseUrl：解析一个 URL
• makeUrl：根据 urlObj 构建一个 url
• setUrlParams：设置 urlObj 的参数
• getUrlParams：获取 urlObj 的参数

2. 数字相关操作（2022-08 完成）

• add：数字相加
• subtract：数字相减
• multiply：数字相乘
• divide：数字相除
• toFraction：数字格式化
• toFixed：向上向下取整/四舍五入
• toolNumber：科学计数法转小数

3. cookie 相关操作

• get：获取 cookie
• set：设置 cookie
• remove：删除 cookie

4. storage 相关操作

• set：设置 localStorage
• setAll：将一个对象分别设置到 localStorage
• get：获取 localStorage 的 key 对应的 value
• remove：删除对应的 localStorage 值
• sync：同步过期时间，将过期的数据移除