免费A级毛片无码专区网站-成人国产精品视频一区二区-啊 日出水了 用力乖乖在线-国产黑色丝袜在线观看下-天天操美女夜夜操美女-日韩网站在线观看中文字幕-AV高清hd片XXX国产-亚洲av中文字字幕乱码综合-搬开女人下面使劲插视频

從0搭建vue3組件庫:自動化發(fā)布、管理版本號、生成 changelog、tag

今天看到一篇文章中提到了一個好用的工具release-it 。剛好可以用在我正在開發(fā)的vue3組件庫 。紙上得來終覺淺,絕知此事要躬行,說干就干,下面就介紹如何將release-it應(yīng)用到實際項目中,讓組件庫可以自動化發(fā)布、管理版本號、生成 changelog、tag等
項目調(diào)整在使用這個工具之前先對組件庫進(jìn)行進(jìn)行一些調(diào)整,這里僅是對項目本身的優(yōu)化和release-it無關(guān) 。

  • 首先修改vite.config.ts將打包后的目錄dist更改為kitty-ui
  • 自動打包中的刪除打包文件改成nodejs方式實現(xiàn)(script/utils/delpath.ts) 。打包之前先將kitty-ui文件下的目錄全部刪除只留下package.json,這個package.json就是正式發(fā)布組件庫所用的配置
import fs from 'fs'const delDir = async (path: string) => {let files: string[] = [];if (fs.existsSync(path)) {files = fs.readdirSync(path);files.forEach(async (file) => {let curPath = path + "/" + file;if (fs.statSync(curPath).isDirectory()) {await delDir(curPath);} else { // 保留package.json文件if (file != 'package.json') {fs.unlinkSync(curPath);}}});if (path != `${componentPath}/kitty-ui`) fs.rmdirSync(path);}};export default delDir使用release-it安裝pnpm add release-it -D -w配置在打包后文件kitty-ui下的package.json中加入script腳本以及git倉庫
{"name": "kitty-ui","version": "4.2.0","main": "lib/index.js","module": "es/index.mjs","files": ["es","lib"],"scripts": {"release": "release-it"},"repository": {"type": "git","url": "https://github.com/geeksdidi/kittyui"},"keywords": ["kitty-ui","vue3組件庫"],"dependencies": {"@kitty-ui/utils": "2.0.3"},"sideEffects": ["**/*.css"],"author": "小月","license": "MIT","description": "","typings": "lib/index.d.ts"}修改根目錄package.jsonscript中的publish:kitty,讓其進(jìn)入打包后文件夾kitty-ui執(zhí)行release命令.
從0搭建vue3組件庫:自動化發(fā)布、管理版本號、生成 changelog、tag

文章插圖
在發(fā)布之前需要先將我們的改動提交到git上,然后在根目錄執(zhí)行
pnpm run publish:kitty
從0搭建vue3組件庫:自動化發(fā)布、管理版本號、生成 changelog、tag

文章插圖

從0搭建vue3組件庫:自動化發(fā)布、管理版本號、生成 changelog、tag

文章插圖
這里會讓我們選擇發(fā)布版本號、是否發(fā)布、是否創(chuàng)建tag等等
生成changelog
  • 安裝@release-it/conventional-changelog
pnpm add @release-it/conventional-changelog -D -w
  • 根目錄新建.release-it.json
{"plugins": {"@release-it/conventional-changelog": {"preset": {"name": "conventionalcommits","types": [{ "type": "feat", "section": "Features" },{ "type": "fix", "section": "Bug Fixes" },{ "type": "chore", "hidden": true },{ "type": "docs", "hidden": true },{ "type": "style", "hidden": true },{ "type": "refactor", "hidden": true },{ "type": "perf", "hidden": true },{ "type": "test", "hidden": true }]},"infile": "../../../CHANGELOG.md"}}}然后執(zhí)行pnpm run publish:kitty,就會發(fā)現(xiàn)根目錄下生成CHANGELOG.md文件
## [4.2.0](https://github.com/geeksdidi/kittyui/compare/v4.1.1...v4.2.0) (2022-10-21)### Features* test ([b69303c](https://github.com/geeksdidi/kittyui/commit/b69303c1c542bd51cd66330b89dd2bb774b09f73))presettype配置表示只有featfix才會被記錄,如提交的commit為fix: 改了一個bug
從0搭建vue3組件庫:自動化發(fā)布、管理版本號、生成 changelog、tag

文章插圖
組件庫如果你對組件庫開發(fā)感興趣的話,歡迎關(guān)注公眾號:web前端進(jìn)階 , 組件庫所有實現(xiàn)包括

經(jīng)驗總結(jié)擴展閱讀