各位观众老爷，大家好！我是你们的老朋友，今天咱们来聊聊如何把你的Vue组件库打扮得漂漂亮亮，然后风风光光地送上NPM的舞台，让全世界的开发者都能用上你的宝贝。
咱们今天的内容主要包括三个方面：
- 版本管理： 像给组件库穿上不同款式的衣服，每次更新都得有独特的标签。
- ChangeLog 自动化生成： 每次换衣服都要记下来，省得以后忘了为啥换。
- NPM 发布： 把组件库打包好，送到NPM商店，让大家都能买到。
一、版本管理：像给组件库穿上不同款式的衣服
版本管理是组件库发布流程的基石，它能让你清晰地追踪每次更新，方便用户选择合适的版本。咱们用Git来管理版本，并遵循语义化版本（Semantic Versioning）规范。
1.1 语义化版本（SemVer）
SemVer 简单来说，就是用三个数字来表示版本号：MAJOR.MINOR.PATCH。
- MAJOR（主版本）： 做了不兼容的 API 修改。比如，把组件的名字改了，或者把某个属性删了。
- MINOR（次版本）： 添加了新功能，但是向后兼容。比如，加了一个新的组件，或者给现有组件添加了一个新的属性。
- PATCH（补丁版本）： 修复了 bug，但是向后兼容。比如，修复了一个组件的样式问题，或者修复了一个逻辑错误。
举个例子：1.2.3 表示主版本是 1，次版本是 2，补丁版本是 3。
1.2 Git 分支策略
推荐使用 main (或 master) 分支作为主分支，用于存放稳定版本的代码。同时，可以创建 develop 分支作为开发分支，用于存放最新的开发代码。
main(或master) 分支： 稳定版本，只接受来自release分支的合并。develop分支： 最新开发代码，接受来自feature分支的合并。feature分支： 开发新功能的分支，基于develop分支创建。release分支： 准备发布版本的预发布分支，基于develop分支创建。hotfix分支： 修复线上 bug 的分支，基于main(或master) 分支创建。
1.3 版本号的递增
每次发布新版本，都要递增版本号。可以使用 npm version 命令来自动递增版本号。
npm version patch # 递增补丁版本 (例如: 1.2.3 -> 1.2.4)
npm version minor # 递增次版本 (例如: 1.2.3 -> 1.3.0)
npm version major # 递增主版本 (例如: 1.2.3 -> 2.0.0)
npm version prerelease --preid beta # 发布预发布版本 (例如: 1.2.3 -> 1.2.4-beta.0)这个命令会自动修改 package.json 文件中的 version 字段，并且会创建一个新的 Git 标签。
1.4 Git Flow 工作流示例
假设我们要发布一个新版本 1.0.0。
-
从
develop分支创建一个release/1.0.0分支。git checkout -b release/1.0.0 develop -
在
release/1.0.0分支上进行最后的测试和调整。 -
使用
npm version命令递增版本号。npm version patch # 假设我们只想发布一个补丁版本 -
将
release/1.0.0分支合并到main(或master) 分支和develop分支。git checkout main git merge release/1.0.0 git tag -a v1.0.0 -m "Release v1.0.0" # 打标签 git push origin main --tags git checkout develop git merge release/1.0.0 git push origin develop -
删除
release/1.0.0分支。git branch -d release/1.0.0 git push origin --delete release/1.0.0
二、ChangeLog 自动化生成：每次换衣服都要记下来
ChangeLog 是记录组件库每次更新内容的日志文件，方便用户了解新版本的功能和修复。手动编写 ChangeLog 既费时又容易出错，所以我们需要自动化生成 ChangeLog。
2.1 Conventional Commits 规范
要实现 ChangeLog 自动化生成，首先要规范 Git Commit 的格式。推荐使用 Conventional Commits 规范。
Conventional Commits 规范的 Commit 消息格式如下：
<type>(<scope>): <subject>
<body>
<footer>- type（类型）： Commit 的类型，例如
feat（新功能）、fix（修复 bug）、docs（文档）、style（代码格式）、refactor（重构）、perf（性能优化）、test（测试）、chore（构建/工具）。 - scope（范围）： Commit 影响的范围，例如
button（按钮组件）、form（表单组件）。 - subject（主题）： Commit 的简短描述。
- body（正文）： Commit 的详细描述。
- footer（脚注）： Commit 的脚注，例如
BREAKING CHANGE（不兼容的修改）。
举个例子：
feat(button): 添加了 size 属性
添加了 large 和 small 两种 size。
BREAKING CHANGE: 移除了 type 属性。2.2 使用 conventional-changelog 生成 ChangeLog
conventional-changelog 是一个根据 Conventional Commits 规范生成 ChangeLog 的工具。
-
安装
conventional-changelog-cli。npm install -g conventional-changelog-cli -
在
package.json文件中添加一个脚本。{ "scripts": { "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0" } }-p angular：使用 Angular 风格的 Commit 规范。-i CHANGELOG.md：指定 ChangeLog 文件为CHANGELOG.md。-s：保持 ChangeLog 文件同步。-r 0：生成所有版本的 ChangeLog。
-
运行
npm run changelog命令生成 ChangeLog。npm run changelog
2.3 集成到发布流程
可以将 npm run changelog 命令集成到发布流程中，每次发布新版本时自动生成 ChangeLog。
{
"scripts": {
"release": "npm version patch && npm run changelog && git add CHANGELOG.md package.json && git commit -m 'chore: 更新 CHANGELOG.md' && git push"
}
}三、NPM 发布：把组件库打包好，送到NPM商店
NPM 发布是将组件库发布到 NPM 仓库，让其他开发者可以通过 npm install 命令安装和使用你的组件库。
3.1 准备工作
-
注册 NPM 账号： 如果你还没有 NPM 账号，需要先注册一个。
-
登录 NPM： 在命令行中登录 NPM。
npm login -
配置
package.json文件： 确保package.json文件中的以下字段正确配置。name：组件库的名称，必须是唯一的。version：组件库的版本号。description：组件库的描述。main：组件库的入口文件。module：组件库的 ES Module 入口文件（可选）。unpkg：组件库的 UMD 入口文件（可选）。files：要发布到 NPM 的文件列表。keywords：组件库的关键词，方便用户搜索。author：作者信息。license：开源许可证。repository：代码仓库地址。bugs：问题反馈地址。homepage：项目主页。
一个示例
package.json文件：{ "name": "my-vue-component-library", "version": "1.0.0", "description": "A Vue component library", "main": "dist/my-vue-component-library.umd.js", "module": "dist/my-vue-component-library.es.js", "unpkg": "dist/my-vue-component-library.min.js", "files": [ "dist/*", "src/*", "README.md", "LICENSE" ], "keywords": [ "vue", "component", "library" ], "author": "Your Name", "license": "MIT", "repository": { "type": "git", "url": "https://github.com/your-username/my-vue-component-library.git" }, "bugs": { "url": "https://github.com/your-username/my-vue-component-library/issues" }, "homepage": "https://your-website.com/my-vue-component-library", "devDependencies": { "vue": "^3.0.0" }, "peerDependencies": { "vue": "^3.0.0" } }注意:
peerDependencies声明了你的组件库依赖的外部库的版本范围，告诉用户安装你的组件库时，需要安装哪些依赖。 比如上面这个例子，就告诉使用者，需要同时安装vue ^3.0.0。 -
忽略不需要发布的文件： 创建
.npmignore文件，指定不需要发布到 NPM 的文件和文件夹。.npmignore文件的语法和.gitignore文件类似。一个示例
.npmignore文件：node_modules/ .gitignore .DS_Store
3.2 打包组件库
在发布之前，需要将组件库打包成可发布的文件。可以使用 Webpack、Rollup 或 Parcel 等工具来打包组件库。
这里以 Rollup 为例，介绍如何打包组件库。
-
安装 Rollup 和相关插件。
npm install rollup rollup-plugin-vue rollup-plugin-babel @babel/core @babel/preset-env --save-dev -
创建
rollup.config.js文件。import vue from 'rollup-plugin-vue'; import babel from 'rollup-plugin-babel'; export default { input: 'src/index.js', // 组件库的入口文件 output: [ { file: 'dist/my-vue-component-library.umd.js', // UMD 格式 format: 'umd', name: 'MyVueComponentLibrary', globals: { vue: 'Vue' // 指定外部依赖 } }, { file: 'dist/my-vue-component-library.es.js', // ES Module 格式 format: 'es' } ], plugins: [ vue(), babel({ exclude: 'node_modules/**' // 只编译自己的代码 }) ], external: ['vue'] // 声明外部依赖 }; -
在
package.json文件中添加一个脚本。{ "scripts": { "build": "rollup -c" } } -
运行
npm run build命令打包组件库。npm run build
3.3 发布到 NPM
-
确保已经登录 NPM： 如果还没有登录 NPM，需要先登录。
npm login -
发布组件库： 在组件库的根目录下运行
npm publish命令。npm publish如果你的组件库是私有的，可以使用
--access public参数将其发布为公开的。npm publish --access public -
验证发布： 发布成功后，可以在 NPM 官网上搜索你的组件库，或者使用
npm install命令安装你的组件库来验证发布是否成功。npm install my-vue-component-library
3.4 自动发布流程
可以将版本号递增、生成 ChangeLog 和发布到 NPM 的步骤合并到一个脚本中，实现自动发布流程。
{
"scripts": {
"release": "npm version patch && npm run changelog && git add CHANGELOG.md package.json && git commit -m 'chore: 更新 CHANGELOG.md' && git push && npm publish"
}
}这个脚本会依次执行以下操作：
- 递增补丁版本号。
- 生成 ChangeLog。
- 将
CHANGELOG.md文件和package.json文件添加到 Git 仓库。 - 提交代码到 Git 仓库。
- 推送到远程 Git 仓库。
- 发布到 NPM。
这样，你只需要运行 npm run release 命令，就可以自动完成版本号递增、生成 ChangeLog 和发布到 NPM 的所有步骤。
四、总结
以上就是 Vue 组件库的发布流程，包括版本管理、ChangeLog 自动化生成和 NPM 发布。 总结一下，咱们讲了以下几点：
- 版本管理： 遵循语义化版本规范，使用 Git Flow 工作流管理版本。
- ChangeLog 自动化生成： 使用 Conventional Commits 规范 Commit 消息，使用
conventional-changelog工具生成 ChangeLog。 - NPM 发布： 配置
package.json文件，使用 Rollup 打包组件库，使用npm publish命令发布到 NPM。
掌握了这些技巧，你就可以轻松地将你的 Vue 组件库发布到 NPM，让更多的开发者受益。
好了，今天的讲座就到这里，感谢大家的观看！ 如果大家觉得有用，别忘了点赞、评论、转发哦！ 下次再见！