今天看到一篇文章中提到了一個好用的工具release-it，剛好可以用在我正在開發的vue3組件庫，紙上得來終覺淺,絕知此事要躬行,說干就干,下面就介紹如何將release-it應用到實際專案中,讓組件庫可以自動化發布、管理版本號、生成 changelog、tag等
專案調整
在使用這個工具之前先對組件庫進行進行一些調整,這里僅是對專案本身的優化和release-it無關，
- 首先修改
vite.config.ts將打包后的目錄dist更改為kitty-ui - 自動打包中的洗掉打包檔案改成nodejs方式實作(script/utils/delpath.ts)，打包之前先將
kitty-ui檔案下的目錄全部洗掉只留下package.json,這個package.json就是正式發布組件庫所用的配置
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.json的script中的publish:kitty,讓其進入打包后檔案夾kitty-ui執行release命令.
在發布之前需要先將我們的改動提交到git上,然后在根目錄執行
pnpm run publish:kitty
這里會讓我們選擇發布版本號、是否發布、是否創建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"
}
}
}
然后執行pnpm run publish:kitty,就會發現根目錄下生成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))
preset中type配置表示只有feat和fix才會被記錄,如提交的commit為fix: 改了一個bug
組件庫
如果你對組件庫開發感興趣的話,歡迎掃碼關注公眾號:web前端進階，組件庫所有實作包括環境搭建，自動打包發布，檔案搭建，vitest單元測驗等等都在這里
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/519398.html
標籤：其他
下一篇：面試 個人摸底監測 考察考察JS三座?? 1. 原型和原型鏈 2. 作?域與閉包 3. 異步和單執行緒 （第四天）