likes
comments
collection
share

vue3-ccui之组件库打包发布

作者站长头像
站长
· 阅读数 46

书接上回，已经完成组件库的基础建设下边可以开始进行打包发布的环节了。

组件库打包发布

打包

执行cli目录中package.json中的build:lib命令，会在 packages/下生成 build目录。

发布

包的名称就是 build/package.json 中的 name 名字不可重复。

注册一个npm账户，已有请忽略

切换npm源地址为官方地址 npm config set registry <https://registry.npmjs.org/>

执行 npm login 按步骤输入内容（密码直接输，不显示）。

执行 npm publish .

vue3-ccui之组件库打包发布

vue3-ccui之组件库打包发布

vue3-ccui之组件库打包发布

组件库文档发布

github Actions 结合 github pages 自动部署文档

更改vitepress配置

github pages 部署需要更改 packages/ccui/docs/.vitepress/config/index.ts增加 base 配置，内容是仓库名称。

比如我的项目路径是 github.com/vaebe/ccui 那么base就是 '/ccui/' vue3-ccui之组件库打包发布

创建 github Actions

在项目根目录下创建如下目录

vue3-ccui之组件库打包发布

├── .github
│   ├── workflows
│   │   ├── deploy.yml

deploy.yml

# 任务的名称
name: deploy-docs

on:
  push:
    branches: [ "master" ]
  pull_request:
    branches: [ "master" ]

jobs:
  build:

    runs-on: ubuntu-latest # 运行环境

    strategy:
      matrix:
        node-version: [ 16.x ] # node 版本

    steps:
      # 检出项目
      - name: Checkout
        uses: actions/checkout@v2 

      # 安装 pnpm
      - name: Install pnpm
        uses: pnpm/action-setup@v2 
        with:
          version: 7

      # 使用特定版本的 node.js
      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v2
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'pnpm'

      - name: Install deps
        run: pnpm i # 下载依赖

      - name: Build docs
        run: pnpm docs:build # 执行打包命令

      # 部署 vitepress
      - name: Deploy-docs
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./packages/ccui/docs/.vitepress/dist # 这里是打包后文件的目录

完成后提交代码推送到远程仓库

上边的配置参考了 vitepress 官网部署章节，官网还是要看的。

查看 Actions 任务

到远程仓库查看Actions，会有一个名为 deploy-docs 的任务，在进行文档的打包。 vue3-ccui之组件库打包发布

失败的样子 vue3-ccui之组件库打包发布

成功的样子 vue3-ccui之组件库打包发布

上边使用到的 actions/checkout@v2、pnpm/action-setup@v2、actions/setup-node@v2、peaceiris/actions-gh-pages@v3 都是已经写好的可以在 github marketplace 找到 vue3-ccui之组件库打包发布

Github Action 精华指南 结合这个文章对上边的配置就很好理解了。

创建 github pages

上边没有问题的话，会新增一个 gh-pages 的的分支里边就是打包好的文档目录。 vue3-ccui之组件库打包发布

点击 save 保存

会自动创建一个名为 pages-build-deployment 的任务并运行，在 gh-pages 分支每次 push 时执行。

gh-pages 每次 push 则发生在上述 deploy-docs 执行完成后触发。

大概就是执行了 git push -f git@github.com:xxx/xxx.git master:gh-pages vue3-ccui之组件库打包发布

手动发布文档

有时候我们并不希望自动更新文档，比如我们需要按照版本来进行发布。

因为 github 增加了账户密码的限制无法执行git push -f 强制更新命令。所以此方法需要配置 githubgithub ssh 具体方法可自行搜索。

在根目录创建 deploy.sh

#!/usr/bin/env sh

# 当发生错误时中止脚本
set -e

# 构建时先删除原有 docs 目录
rm -rf ./packages/ccui/docs/.vitepress/dist

# 构建文档
pnpm docs:build

# cd 到构建文档输出的目录下
cd ./packages/ccui/docs/.vitepress/dist

# 创建 .gin 文件
git init
# 添加文档目录下所有文件
git add -A
# 提交保存
git commit -m 'deploy'

# 强制更新到 gh-pages 目录如果没有则会进行创建
git push -f git@github.com:vaebe/ccui.git master:gh-pages

cd -

到这里打包发布就完成了！

  • 恭喜各位🎉

往期文章

转载自:https://juejin.cn/post/7124486974211096612
评论
请登录