ygcx-utils v1.1.9

技术架构

• 使用使用 Vite 搭建项目
• 在 Vite 中集成 typescript
• 在项目中集成 eslint 和 prettier 保证代码质量 遵循 airbnb 标准
• 规范化 git 提交信息 commitlint standard-version changelog (自动生成版本号)
• 为团队开发专属的npm项目模板
• 功能清单:
  • 对象深度合并
  • 深度克隆
  • url 参数获取
  • url 参数转对象
  • url 对象转 url 参数
  • UA 版本号
  • UA 平台(司机端/乘客端)
  • 时间 格式化
  • cookies(增删改查)
  • 网络层 (拦截器)
  • 防抖/节流
  • base64 (urlToBase64...)
  • 类型精准判断 (is/isDef/isUnDef/isObject/isEmpty/isDate/isNull/isNumber/isBoolean/isRegExp/isString/isMap/isFunction/isUrl)
  • bridge (token/userinfo/driverinfo/微信分享/支付/跳转小程序...)

vite 项目搭建

npm init @vitejs/app 项目名称

npm init vite@latest

? Project name: » vite-project
? Select a framework: » - Use arrow-keys. Return to submit.
>   vanilla
    vue
    react
    preact
    lit
    svelte

cd vite-project
npm install
npm run dev

git commit 规范

安装使用包 Commitizen 帮助规范化提交代码 ( 这一步的目的是安装完成后，直接使用指令 git cz 来取代 git commit 进行代码提交)

1. 全局安装 commitizen & cz-conventional-changelog

# 安装
> npm i -g commitizen cz-conventional-changelog

安装完成后，接下来在 package.json 中添加两部分内容

1. 添加一条 script 中的指令 "commit": "git-cz"
2. 添加 config 中内容

{
  "script": {
      ...,
      "commit": "git-cz",
  },
  "config": {
    "commitizen": {
      "path": "node_modules/cz-conventional-changelog"
    }
  }
}

2. 项目内安装 commitlint & husky

commitlint 负责用于对 commit message 进行格式校验，husky 负责提供更易用的 git hook

#安装
npm install --save-dev @commitlint/config-conventional @commitlint/cli
#添加规范
echo "module.exports = {extends: ['@commitlint/config-conventional']};" > commitlint.config.js

@commitlint/cli: commitlint 的 CLI 工具 @commitlint/config-conventional: commitlint 的 conventional 规范配置方案，这是一个从 config-angular 衍生出的一个分支 husky: 一款 git hook 工具，可以 hook git 的命令

在项目的 package.json 中添加 commit 钩子

{
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS,",
      //js、css检测，这两个检测需要自己配置，pre-commit会优先于commit-msg执行
      "pre-commit": "npm run stylelint && npm run eslint"
    }
  }
}

commit-msg 代表对 commit message 进行 hook，hook 的时候执行后面的命令 commitlint -E HUSKY_GIT_PARAMS 进行检查。

git cz 自定义 Adapter 中文选项

cz-custionizable

git cz

$ git cz
cz-cli@4.2.4, cz-conventional-changelog@3.2.0

? Select the type of change that you're committing: (Use arrow keys)
> feat:     A new feature
  fix:      A bug fix
  docs:     Documentation only changes
  style:    Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
  refactor: A code change that neither fixes a bug nor adds a feature
  perf:     A code change that improves performance
  test:     Adding missing tests or correcting existing tests
(Move up and down to reveal more choices)



? Select the type of change that you're committing: feat:     A new feature
? What is the scope of this change (e.g. component or file name): (press enter to skip)
? Write a short, imperative tense description of the change (max 94 chars):
 (0)

? Provide a longer description of the change: (press enter to skip)
? Are there any breaking changes? (y/N)
? A BREAKING CHANGE commit requires a body. Please enter a longer description of the commit itself:
(-)
? Describe the breaking changes:
? Does this change affect any open issues? (y/N)

$ git cz
cz-cli@4.2.4, cz-customizable@6.3.0

All lines except first will be wrapped after 100 characters.
? 请选择提交类型: (Use arrow keys)
> feat:     新功能
  fix:      修复
  docs:     文档变更
  style:    代码格式(不影响代码运行的变动)
  refactor: 重构(既不是增加feature，也不是修复bug)
  perf:     性能优化
  test:     增加测试
(Move up and down to reveal more choices)

? 请选择提交类型: feat:     新功能
? 请输入修改范围(可选):
? 请简要描述提交(必填): feat: 测试
? 确认使用以上信息提交？(y/n/e/h) (Yneh)

测试

#1. 创建一个自己的分支并切换过去
git checkout -b feature/Npmpackage

#2. 把本地分支push到远程
git push origin feature/Npmpackage

#3. 查看本地修改
git status

#4. 添加本地修改
git add .

#5.commit修改
git commit -m 'XXXX'
以后切换为
git cz

#6 push代码
git push origin feature/Npmpackage

#7. 查看分支
git branch

#8. 切换到主分支
git checkout master

#9. 更新
git pull

版本发布配置 standard-version: 自动生成 CHANGELOG

standard-version 已弃用。

$ npm i -S standard-version

package.json 配置:

"scirpt":{"release":"standard-version"}

执行

npm run release

常用发布命令

// 初次发布版本
$ npm run release --first-release
// 添加版本信息和指定发布版本等级
$ npm run release -m "Commit message" -r minor

// 确认发布，npm publish 发布到 npm
$ git push --follow-tags origin master && npm publish

打包

生成dist文件

npm run build

注册->登录npm

按提示注册就可以 npm官网

发布前准备 在dist文件生成package.json文件，自定义组件名(唯一，重名报错重新起一个就行),版本号每次上传要高于前一次版本号

//dist文件下

npm init -y

//package.json
{
  "name": "test-ui",
  "version": "1.0.4",
  "description": "",
  "main": "test-btn.es.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"

发布到npm

npm publish