各位观众，大家好！今天咱们来聊聊 Vue 组件库的发布流程，保证让你的组件库漂漂亮亮地上架 NPM，从此走上人生巅峰（误）。废话不多说，咱们直接进入正题！
第一部分：磨刀不误砍柴工 – 项目初始化与配置
在开始之前，咱们得先准备好工具和环境。这里默认你已经搭建好了 Vue 项目，并且使用了 Git 进行版本控制。
-
项目结构规划：
一个好的项目结构能让你的开发事半功倍。推荐的结构如下：
my-vue-component-library/ ├── src/ # 组件源代码 │ ├── components/ # 所有组件目录 │ │ ├── MyComponent/ # 单个组件目录 │ │ │ ├── MyComponent.vue # 组件本体 │ │ │ ├── index.js # 组件导出 │ │ └── ... │ ├── index.js # 组件库入口，导出所有组件 ├── packages/ # 打包后的代码存放目录 ├── docs/ # 组件文档 (可选，推荐使用 Storybook 或 VuePress) ├── .gitignore # Git 忽略文件 ├── package.json # 项目配置文件 ├── README.md # 项目说明文档 ├── webpack.config.js # Webpack 配置文件 (如果需要自定义构建) ├── .babelrc # Babel 配置文件 └── ... -
package.json 配置：
package.json是项目的灵魂，需要认真配置。{ "name": "my-vue-component-library", "version": "0.0.1", // 初始化版本号 "description": "一个超好用的 Vue 组件库", "main": "packages/index.js", // 组件库入口文件（CommonJS） "module": "packages/index.esm.js", // 组件库入口文件（ES Module） "unpkg": "packages/index.umd.js", // CDN 引用 "files": [ // 需要发布到 NPM 的文件 "packages", "src/style.css" // 如果有全局样式 ], "keywords": [ "vue", "component", "ui" ], "author": "你的大名", "license": "MIT", "repository": { "type": "git", "url": "git+https://github.com/your-username/my-vue-component-library.git" }, "bugs": { "url": "https://github.com/your-username/my-vue-component-library/issues" }, "homepage": "https://github.com/your-username/my-vue-component-library#readme", "scripts": { "dev": "vue-cli-service serve", "build": "npm run build:lib", "build:lib": "vue-cli-service build --target lib --name my-vue-component-library src/index.js", "lint": "vue-cli-service lint", "release": "standard-version", "publish": "npm publish" }, "peerDependencies": { "vue": "^2.6.0" // 你的组件库依赖的 Vue 版本 }, "devDependencies": { "@vue/cli-service": "^4.5.0", "vue-template-compiler": "^2.6.11", "standard-version": "^9.5.0" } }name: 你的组件库名称，必须是唯一的。version: 组件库版本号，遵循语义化版本规范 (Semantic Versioning)。main,module,unpkg: 不同环境下的入口文件，方便各种方式引入。files: 指定需要发布到 NPM 的文件，避免上传不必要的文件。peerDependencies: 指定组件库依赖的 Vue 版本，避免版本冲突。scripts: 定义常用的脚本命令。devDependencies: 开发依赖，例如构建工具、代码检查工具等。
-
组件库入口文件 (src/index.js):
// src/index.js import MyComponent from './components/MyComponent'; import AnotherComponent from './components/AnotherComponent'; // 存储组件列表 const components = [ MyComponent, AnotherComponent ]; // 定义 install 方法，App 为 Vue 实例 const install = function (App) { // 注册所有组件 components.forEach(component => { App.component(component.name, component); }); }; // 判断是否是直接引用文件，如果是，就不用调用 Vue.use() if (typeof window !== 'undefined' && window.Vue) { install(window.Vue); } export default { install, ...components // 允许单独引用组件 };这个文件负责导出所有组件，并提供
install方法，方便用户通过Vue.use()注册组件库。
第二部分：版本管理 – 让你的代码井然有序
版本管理是组件库发布流程中至关重要的一环。好的版本管理能让你清晰地追踪代码变更，方便回滚和发布新版本。
-
语义化版本 (Semantic Versioning):
遵循语义化版本规范，版本号由三部分组成：
MAJOR.MINOR.PATCH。MAJOR: 做了不兼容的 API 修改。MINOR: 增加了新功能，但向后兼容。PATCH: 修复了 bug，向后兼容。
-
standard-version:
standard-version是一个自动化版本管理工具，它可以自动生成 ChangeLog、更新版本号、打 Tag。-
安装:
npm install standard-version --save-dev -
配置: 在
package.json中添加release脚本："scripts": { "release": "standard-version" } -
使用: 运行
npm run release。standard-version会：- 分析 Git 提交记录，确定版本号。
- 更新
package.json和package-lock.json中的版本号。 - 生成 ChangeLog 文件 (CHANGELOG.md)。
- 提交代码，并打上 Tag。
-
自定义配置:
standard-version可以通过配置文件.versionrc.js进行自定义。例如，可以配置 ChangeLog 的生成规则、忽略某些提交等等。// .versionrc.js module.exports = { types: [ { type: 'feat', section: 'Features' }, { type: 'fix', section: 'Bug Fixes' }, { type: 'chore', section: 'Chores' }, { type: 'docs', section: 'Documentation' }, { type: 'style', section: 'Styles' }, { type: 'refactor', section: 'Code Refactoring' }, { type: 'perf', section: 'Performance Improvements' }, { type: 'test', section: 'Tests' }, { type: 'build', section: 'Build System' }, { type: 'ci', section: 'Continuous Integration' } ], commitUrlFormat: 'https://github.com/your-username/my-vue-component-library/commit/{{hash}}', compareUrlFormat: 'https://github.com/your-username/my-vue-component-library/compare/{{previousTag}}...{{currentTag}}' };
-
-
Commit 规范:
为了让
standard-version能够正确地生成 ChangeLog，需要遵循一定的 Commit 规范。推荐使用 Angular Commit Message Conventions。<type>(<scope>): <subject> <body> <footer>type: 提交类型，例如feat(新功能)、fix(bug 修复)、docs(文档修改) 等。scope: 影响范围，例如component(组件)、style(样式) 等。subject: 简短的提交描述。body: 详细的提交描述。footer: 例如关联 issue、BREAKING CHANGE 等。
例子：
feat(MyComponent): 添加了 disabled 属性 添加了 disabled 属性，用于禁用组件。 BREAKING CHANGE: 修改了组件的 API，需要更新代码。有了规范的 Commit 信息，
standard-version才能准确地识别提交类型，并生成清晰的 ChangeLog。
第三部分：ChangeLog 自动化生成 – 让用户一目了然
ChangeLog 是记录组件库版本更新的重要文件，方便用户了解每个版本的新功能、bug 修复和 API 变更。
-
ChangeLog 格式:
一个好的 ChangeLog 应该包含以下信息：
- 版本号
- 发布日期
- 每个提交类型的详细描述 (例如 Features, Bug Fixes, Breaking Changes)
-
standard-version 自动生成 ChangeLog:
standard-version会根据 Git 提交记录自动生成 ChangeLog 文件 (CHANGELOG.md)。ChangeLog 的内容会根据 Commit Message 的类型进行分类，方便用户阅读。例子：
# Change Log All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. ## [1.0.0](https://github.com/your-username/my-vue-component-library/compare/v0.0.1...v1.0.0) (2023-10-27) ### Features * **MyComponent:** 添加了 disabled 属性 ([commit-hash](https://github.com/your-username/my-vue-component-library/commit/commit-hash)) ### Bug Fixes * **AnotherComponent:** 修复了样式问题 ([commit-hash](https://github.com/your-username/my-vue-component-library/commit/commit-hash)) ### BREAKING CHANGES * **MyComponent:** 修改了组件的 API，需要更新代码。standard-version会自动将 Commit Message 按照类型进行分类，并生成链接到 GitHub Commit 页面的链接。
第四部分：NPM 发布 – 让你的组件库走向世界
万事俱备，只欠东风！现在咱们就可以将组件库发布到 NPM 上了。
-
NPM 账号:
首先，你需要一个 NPM 账号。如果没有，请前往 https://www.npmjs.com/ 注册一个。
-
登录 NPM:
在命令行中运行
npm login，输入你的用户名、密码和邮箱。 -
构建组件库:
运行
npm run build，将组件库打包到packages目录下。 -
发布 NPM:
运行
npm publish，将组件库发布到 NPM 上。- 注意: 如果你的组件库名称已经被占用，需要修改
package.json中的name字段。 -
Scoped Packages: 如果需要发布 Scoped Packages (例如
@your-username/my-vue-component-library)，需要在package.json中添加publishConfig字段：{ "name": "@your-username/my-vue-component-library", "publishConfig": { "access": "public" } }并且在发布时使用
npm publish --access public。
- 注意: 如果你的组件库名称已经被占用，需要修改
-
更新版本:
每次发布新版本时，都需要更新
package.json中的version字段。可以使用standard-version自动更新版本号和生成 ChangeLog。
第五部分：持续集成 (CI) – 让发布流程自动化
手动发布组件库是一件繁琐的事情，容易出错。使用持续集成 (CI) 可以自动化发布流程，提高效率和可靠性。
-
选择 CI 工具:
常用的 CI 工具包括 GitHub Actions, GitLab CI, Travis CI 等。这里以 GitHub Actions 为例。
-
创建 GitHub Actions Workflow:
在项目根目录下创建
.github/workflows/release.yml文件。name: Release on: push: branches: - main # 监听 main 分支的 push 事件 jobs: release: runs-on: ubuntu-latest steps: - uses: actions/checkout@v3 with: fetch-depth: 0 - uses: actions/setup-node@v3 with: node-version: 16 registry-url: https://registry.npmjs.org/ - run: npm install - run: npm run build - run: npx semantic-release env: NPM_TOKEN: ${{ secrets.NPM_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}on: 触发 Workflow 的条件，这里监听main分支的 push 事件。jobs: 定义 Workflow 的任务。steps: 定义每个任务的步骤。uses: 使用 GitHub Actions 提供的 Actions。run: 运行 Shell 命令。env: 设置环境变量。
-
配置 NPM_TOKEN 和 GITHUB_TOKEN:
在 GitHub 项目的 Settings -> Secrets -> Actions 中添加
NPM_TOKEN和GITHUB_TOKEN两个 Secret。NPM_TOKEN: NPM 的 Token，用于发布组件库。可以在 https://www.npmjs.com/settings/your-username/tokens 创建。GITHUB_TOKEN: GitHub 自动生成的 Token，用于访问 GitHub API。
-
提交代码:
将
.github/workflows/release.yml文件提交到 GitHub。现在，每次向
main分支 push 代码时，GitHub Actions 都会自动运行 Workflow，构建组件库、发布 NPM 和生成 Release。
第六部分：常见问题与注意事项
- 版本号冲突: 如果发布时遇到版本号冲突，可能是因为已经存在相同版本的组件库。需要更新版本号，并重新发布。
- 权限问题: 如果发布时遇到权限问题，可能是因为 NPM 账号没有足够的权限。需要检查 NPM 账号的权限，或者联系 NPM 客服。
- 文件忽略:
files字段指定需要发布到 NPM 的文件，避免上传不必要的文件。 - peerDependencies:
peerDependencies指定组件库依赖的 Vue 版本，避免版本冲突。 - 测试: 在发布之前，一定要进行充分的测试，确保组件库的质量。
- 文档: 编写清晰的文档，方便用户使用组件库。
- 示例: 提供示例代码，帮助用户快速上手。
总结
Vue 组件库发布流程看似复杂，其实只要掌握了版本管理、ChangeLog 自动化生成和 NPM 发布这三个核心环节，就能轻松搞定。希望今天的讲座能帮助大家顺利发布自己的组件库，让更多人受益。
记住，代码世界充满乐趣，保持学习的热情，不断探索新的技术，你也能成为一名优秀的开发者！ 感谢大家的观看！