wm-kit v0.0.5
wm-kit
概述:
武汉美萌 Javascript 工具库。致力于打造一个日常开发中常用并且通用的前端工具库,拒绝重复造轮子。
若您也想为其添砖加瓦,请阅读: 开发者模式
文档速览:wm-kit
特征:
- 开箱即用,支持 CDN、ESM、CommonJs 三种导入方式。
- 使用 typescript 开发,具备完整的类型推导
- 代码即文档,无需繁琐的配置,完全专注于逻辑层的实现
- 更加便携的单元测试流程
快速开始:
monorepo 项目中使用
在monorepo组织管理的项目中,您可以使用git
工具将项目clone至您的工作区内,例如您的工作区是以下目录:
packages:
- 'packages/*'
- 'components/**'
- 'modules/**/**'
- '!**/test/**'
正常情况下:
- packages 目录存放的是业务项目
- components 存放的是组件库
- modules 存放公共的工具库
也就是说我们只需要使用 git 工具将项目 clone 至 modules 目录下即可,当您具有仓库访问权限时,您可以使用以下两种方式将仓库clone至本地的modules目录下:
# ssh 地址
git clone git@codeup.aliyun.com:5f855dfb1858a17210466fd0/wuhang-meimeng-development/wm-kit.git
# https 地址
git clone https://codeup.aliyun.com/5f855dfb1858a17210466fd0/wuhang-meimeng-development/wm-kit.git
克隆至本地完成以后,您需要在您的业务项目中添加开发时依赖,版本号为:"workspace:":
// package.json
{
"dependencies": {
// ... more
"wm-kit": "workspace:"
}
}
之后在项目根目录下执行 pnpm install
即可
非 monorepo 项目中使用
若您的项目不是monorepo架构,那么可以通过软连接的方式来安装项目。
首先将代码克隆至任意目录下。
然后cd进入wm-kit
根目录,执行命令,这一操作是创建软链接至全局:
pnpm link --global
之后在需要使用wm-kit
的项目的根目录下执行命令,这一操作表示,从全局将 wm-kit 软链至此项目:
pnpm link wm-kit --global
随后就可以在项目中使用ESM方式导入wm-kit
下所有模块了:
import { isNumber } from 'wmkit';
开发者模式
前言:
感谢您选择为工具库添砖加瓦,wm-kit
的开发模式能让您尝试到代码即文档的丝滑开发体验。wm-kit
的开发模式与您平时开发项目时封装工具函数无异,不会让您感觉到繁琐且不易于掌握,但需要您严格遵守以下开发规范:
- 所有模块都应在
src/modules/
下根据函数处理入参出参的数据类型来划分目录结构,例如:src/modules/string
处理字符串类型的方法都应存放至此目录下,并由src/modules/string/index.ts
文件统一导出。 wm-kit
在打包构建文档时,入口文件为:src/index.ts
,所以需要在此文件中将所有模块统一按照re-export
方式导出,也就是重新导出一个模块的所有成员。如:export * from './modules/date';
但需要注意的是,使用此方式导出时,请勿为其加上别名,因为 typedoc 在生成 markdown 文档时对此导出方式做了特殊判断,但并未兼容类似:
export * as date from './modules/date
这种以别名导出的方式。请务必使用export * from './modules/date'
语法导出模块下所有方法。wm-kit
将自动的把注释内容生成markdown
文档,并由vitepress
驱动,所以为了方便其他人阅读和使用,您需要将您编写的所有方法都加入注释,并且严格遵守 tsdoc 规范,此外,注释中可以使用markdown
语法来修饰以及丰富文档内容,理论上支持所有vitepress
提供的特殊markdown
语法。所有方法都应在注释中加入
@group
分组标签并在其标签后标注组名,以及使用@author
标注作者,项目在 CI/CD 步骤时,typedoc
将会根据@group 标注的名称,在vitepress
生成对应侧边栏菜单,组名可以存在多个,这将会生成多个侧边菜单并同时包含此方法。使用@author标注作者将会有效保证后期维护和迭代优化工作:/** * ### 将字符串格式化为首字母大写 * @group 格式化 * @author 高强 * @param str 需要格式化的字符串 * @returns * * ### 示例 * ``` ts * import { formatInitialCapital } from 'wm-kit' * formatInitialCapital('javascript') // => Javascript * ``` */ export const formatInitialCapital = (str: string) => { let firstLetter = str.charAt(0).toUpperCase(); let restOfStr = str.slice(1).toLowerCase(); return firstLetter + restOfStr; };
在此示例中,
@group 格式化
会将“格式化”作为一级侧边菜单名称并将该方法作为它的子菜单。所有方法都应该是纯函数,保证函数体内所有逻辑不会对入参产生副作用
所有函数中所依赖的变量都应该有明确的类型,而不是
any
,并且所有被使用过的类型、枚举以及接口都应在src/index.ts
文件中统一被导出。代码提交请按照 Angular 信息提交规范 来提交信息:
{ "types": [ { "type": "feat", "section": "✨ Features | 新功能" }, { "type": "fix", "section": "🐛 Bug Fixes | Bug 修复" }, { "type": "perf", "section": "⚡ Improvements | 优化" }, { "type": "revert", "section": "⏪ Reverts | 回退" }, { "type": "chore", "section": "📦 Chores | 其他更新" }, { "type": "docs", "section": "📝 Documentation | 文档" }, { "type": "style", "section": "💄 Styles | 风格" }, { "type": "refactor", "section": "♻ Code Refactoring | 代码重构" }, { "type": "test", "section": "✅ Tests | 测试" }, { "type": "build", "section": "👷 Build System | 构建" }, { "type": "ci", "section": "🔧 Continuous Integration | CI 配置" } ] }
例如,新增方法:
formatInitialCapital
, 则提交信息如下:git commit -m 'feat: 新增首字母转大写方法:formatInitialCapital'
将
feat:
作为前缀。开发完成后,新增方法都应在
test/modules/
目录下编写单元测试用例,并使用npm run test
对其测试,单元测试的文件名统一以spec.ts
作为后缀。
发布
开发完成后,您只需要将您新增的部分提交并推送至main主分支即可,推送成功后,Jenkins会自动将文档进行部署,这个部署的过程大概会持续2-3分钟。