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

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

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

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

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

初始化本地 Git 仓库：

git init

增加要提交到 git 的文件：

git add .

提交代码到本地仓库：

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

设置主分支：

git branch -M main

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

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

将代码推送到 GitHub 仓库中：

git push -u origin main

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

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

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

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

实现思路如下：

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

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

pnpm run docs:build

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

文档构建实现后，须要将其提交到一个新分支上，如果手动操作，会比拟繁琐，优雅哥举荐应用一个 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 的仓库首页看到该分支：

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

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

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

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

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

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

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

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

最初咱们须要批改组件库的上下文门路。如果简略解决，就是批改 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 等，它能够帮忙咱们更加自动化实现很多操作，大家没事能够多去理解。

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

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

1 提交 GitHub

1.1 创立 Repository

1.2 推送代码

2 公布组件库文档

2.1 构建组件库文档

2.2 推送到 github 新分支

2.3 配置 GitHub Pages

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