从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag - 公众号-web前端进...
source link: https://www.cnblogs.com/zdsdididi/p/16827229.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
从0搭建vue3组件库:自动化发布、管理版本号、生成 changelog、tag
今天看到一篇文章中提到了一个好用的工具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单元测试
等等都在这里
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK