关于前端:Vue3-企业级优雅实战-组件库框架-12-发布开源组件库

后面应用了 11 篇文章分享基于 vue3、Monorepo 的组件库工程残缺四件套（组件库、文档、example、cli）的开发、构建及组件库的公布。本文属于这 11 篇文章的扩大 —— 如何公布到 GitHub 上以及如何疾速利用 GitHub 公布组件库文档。这样优雅哥的《组件库框架》系列便造成了一个闭环：从开发，到开源。在开始本文之前，请您先注册 GitHub 账号并登录。

1 提交 GitHub

1.1 创立 Repository

登录 GitHub 后，点击右上角的“+”—“New repository”创立一个 Repository，如下图：

进入创立仓库页面后，填写仓库名称（对于仓库名称，优雅哥习惯应用本地的项目名称），点击页面底部的“Create repository”按钮：

仓库创立实现后，便进入该仓库的页面，在该页面上曾经分明的写着如何将本地代码提交到 GitHub 仓库中。

1.2 推送代码

在命令中进入我的项目根目录，顺次执行如下命令提交代码到下面创立的 GitHub 仓库中

1. 初始化本地 Git 仓库：

git init

2. 增加要提交到 git 的文件：

git add .

3. 提交代码到本地仓库：

git commit -m 'feat: 初始化组件库工程'

4. 设置主分支：

git branch -M main

5. 增加近程仓库，这行命令能够从下面仓库创立胜利后的页面中看到：

git remote add origin git@github.com:HeroCloudy/yyg-demo-ui.git

6. 将代码推送到 GitHub 仓库中：

git push -u origin main

这样便将本地的代码提交到 GitHub 中了。刷新仓库的页面，显示如下：

后续代码如果有批改，首先应用 git commit 提交到本地仓库，再通过 git push 命令即可推送到 GitHub。

2 公布组件库文档

代码曾经在 GitHub 上公布了，接下来咱们心愿充沛应用 GitHub 的资源，将组件库打包后的文档公布到 GitHub 上，让使用者可能间接拜访该文档。

GitHub 提供了一个能力 pages，通过 pages 能够让咱们公布动态 HTML 资源到 GitHub 上，并反对以 HTTP 的模式拜访到网页。

实现思路如下：

1. 构建组件库文档；
2. 将构建后的组件库文档（./docs/.vitepress/dist）提交并推送到仓库的另一个分支上；
3. 配置 GitHub Pages，让其指向下面的新分支。

2.1 构建组件库文档

咱们之前配置了组件库文档的构建命令：

pnpm run docs:build

期待构建实现，会看到打包后的内容位于 ./docs/.vitepress/dist 目录下。

2.2 推送到 github 新分支

文档构建实现后，须要将其提交到一个新分支上，如果手动操作，会比拟繁琐，优雅哥举荐应用一个 npm 工具来帮咱们实现这个操作 —— gh-pages。

在我的项目根目录下装置 gh-pages：

pnpm install gh-pages -D -w

接下来就能够应用 gh-pages 将指定目录提交到 github 的新分支（gh_pages 分支）上：

gh-pages -d docs/.vitepress/dist

稍等一会儿，控制台中会提醒 Published，那就阐明公布胜利，这时候能够看看仓库的分支：

首先执行 git fetch 拉取 GitHub 上最新的分支信息，而后执行 git branch -a 查看本地和近程所有的分支，输入如下：

能够看到近程多了一个名为 gh-pages 的分支。咱们同样能够在 GitHub 的仓库首页看到该分支：

回顾一下，下面的操作波及两个步骤：

1. 打包组件库文档
2. 将文档打包后的内容推送到 gh-pages 分支。

咱们能够在我的项目根目录的 package.json 中增加一个新的 script 合并下面两个操作：

"scripts": {
  ...
  "docs:deploy": "pnpm run docs:build && gh-pages -d docs/.vitepress/dist",
  ...
},

前面组件库文档批改内容时，只须要执行 pnpm run docs:deploy 即可。

2.3 配置 GitHub Pages

1）在仓库首页点击 Settings 按钮，进入仓库设置页

2）点击设置页左侧的 pages，进入 GitHub Pages 页面，在该页面中能够看到默认为咱们配置了 gh-pages 分支，同时也通知了咱们拜访地址：

3）在浏览器中拜访该门路，会发现显示不失常，这是因为组件库文档模块配置的上下文门路（BaseUrl）与实在的上下文门路不同导致的。

2.4 组件库文档上下文门路辨别环境

最初咱们须要批改组件库的上下文门路。如果简略解决，就是批改 docs/.vitepress/config.ts 中导出对象的 base 属性的值即可。在 github pages 中的上下文门路为：/yyg-demo-ui/，所以只须要简略将 base: ‘/’ 批改为 base: ‘/yyg-demo-ui/’。但如此一来，在本地开发时拜访门路也须要携带这个上下文 http://localhost:3100/yyg-dem…。

那如何实现本地开发应用 /，打包构建应用 /yyg-demo-ui/ 呢？只须要如下三步便可实现：

1）在 docs 模块中增加开发依赖 minimist，该依赖用于提取命令中的参数：

pnpm install minimist -D

2）批改 docs 模块中的 build 命令，为该命令增加个 build 参数：

"scripts": {
    ...
    "build": "vitepress build --build",
    ...
},

3）在 docs/.vitepress/config.ts 中判断以后运行模式是 dev 或 build，依据判断后果指定 base 的值：

import minimist from 'minimist'
....

const argv = minimist(process.argv.slice(2))
const build = argv.build || false

export default defineConfig({
  ...
  base: build ? '/yyg-demo-ui/' : '/',
  ...
})

这样咱们就能依据不同的运行形式指定不同的上下文门路了。

在我的项目根目录提交代码，并从新执行 pnpm run docs:deploy，期待组件库文档打包实现和公布实现显示 Published 后，再刷新浏览器，便能够显示组件库文档的页面了。如果显示仍旧不失常，可能是网络和缓存的起因，过几分钟暴力刷新再试：

到此，咱们便实现了组件库的开源，将其提交到 GitHub，并应用 GitHub Pages 拜访组件库的文档。对于 GitHub 还有很多高级操作，如利用 GitHub 进行 CI/CD，Action runner 等，它能够帮忙咱们更加自动化实现很多操作，大家没事能够多去理解。

感激浏览本文，如果本文给了你一点点帮忙或者启发，还请三连反对一下，理解更多内容工薇号“程序员优雅哥”。