Vue3 企业级优雅实战 - 组件库框架 - 12 发布开源组件库

1 提交 GitHub

1.1 创建 Repository

1.2 推送代码

在命令中进入项目根目录，依次执行如下命令提交代码到上面创建的 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。

2 发布组件库文档

GitHub 提供了一个能力 pages，通过 pages 可以让咱们发布静态 HTML 资源到 GitHub 上，并支持以 HTTP 的形式访问到网页。

将构建后的组件库文档（./docs/.vitepress/dist）提交并推送到仓库的另一个分支上；
配置 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 的仓库首页看到该分支：

将文档打包后的内容推送到 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

Settings 按钮，进入仓库设置页

pages，进入 GitHub Pages 页面，在该页面中可以看到默认为咱们配置了 gh-pages 分支，同时也告诉了咱们访问地址：

2.4 组件库文档上下文路径区分环境

最后咱们需要修改组件库的上下文路径。如果简单处理，就是修改 docs/.vitepress/config.ts 中导出对象的 base 属性的值即可。在 github pages 中的上下文路径为：/yyg-demo-ui/，所以只需要简单将 base: '/' 修改为 base: '/yyg-demo-ui/'。但如此一来，在本地开发时访问路径也需要携带这个上下文 http://localhost:3100/yyg-demo-ui。

/，打包构建使用 /yyg-demo-ui/ 呢？只需要如下三步便可实现：

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 后，再刷新浏览器，便可以显示组件库文档的页面了。如果显示依旧不正常，可能是网络和缓存的原因，过几分钟暴力刷新再试：

公众号同名“程序员优雅哥” + 更多学习资料。

编程笔记 » Vue3 企业级优雅实战 - 组件库框架 - 12 发布开源组件库