共计 4225 个字符,预计需要花费 11 分钟才能阅读完成。
鉴于我公布 / 行将公布的 npm 包越来越多,我决定用 github 的 actions 性能来实现 npm 包主动公布,过程也比较顺利,遂决定写一篇流水账记录下主动公布的实现,不便当前用到的时候翻阅。
起步
以 react-m-editor 这个组件为例子,公布过程个别分位两步以下两步:
- 打包组件,公布 npm 组件
- 打包示例,公布 github page 示例界面
上面咱们就依照下面两个步骤来实现目标。
咱们先在 github 网站上的我的项目下找到 Actions 菜单栏,这边官网会提供一堆 Workflow 供咱们抉择,咱们从中找到一个 Publish Node.js Package,会主动帮咱们生成一份配置文件 .github/workflow/npm-publish.yml
,内容如下:
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
name: Node.js Package
on:
release:
types: [created]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 14
- run: npm ci
- run: npm test
publish-npm:
needs: build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 14
registry-url: https://registry.npmjs.org/
- run: npm ci
- run: npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
// ... 还有一部分用于公布 githua package 的代码
// ... 因为用不到所以间接将这部分删除了
上面咱们依据具体的公布步骤批改配置文件。
触发事件配置
个别的公布脚本都会有一个触发事件,github actions 是通过脚本中的 on
字段判断的,默认的触发事件是创立版本:
on:
release:
types: [created]
我比拟习惯应用 pull_request
公布,所以在这里我将它改成了其余分支公布 pr 到 main 分支时公布:
on:
pull_request:
branches:
- main
公布 npm 组件
之前公布 npm 包都是本地打包成组件后登录 npm 账号运行 npm publish
公布,生成的配置文件中曾经有相似的性能了,然而还有一些配置须要批改。
首先示例配置文件用的包管理工具是 npm,而我的我的项目用的是 yarn,通过 查阅材料 发现 `
actions
/setup-node 这个工具反对
yarn`
:
Supported package managers are npm, yarn, pnpm (v6.10+).)
间接将 npm ci
批改成 yarn install
。
生成的配置文件中的 build 局部是单元测试用的,这个组件没写测试代码😓,所以这块间接删除。而在公布的配置中,短少了打包的选项,所以还得增加 yarn build
。最初公布局部配置具体如下:
publish-npm:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 14
registry-url: https://registry.npmjs.org/
- run: yarn
- run: yarn build
- run: yarn publish
env:
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
这边有配置一个 secrets.npm_token
,这是一个 npm 生成的用来做登录认证的 token,配置步骤如下:
在 npm 官网生成 token
- 登录 npm 官网,在右上角的头像下拉选项中选中 Access Tokens 进入界面
- 点击 Generate New Token 按钮,抉择 Automation 或者 publish 选项,再点击 Generate Token 按钮
- 界面提醒 Successfully generated a new token!,复制生成的 token
在 github 中注销 token
- 进入 github 的 我的项目目录,抉择 Settings 菜单进入我的项目的设置界面
- 在侧边栏选中 Secrets 进入该界面,选中 New repository secret 按钮,输出表单信息,Name 为
NPM_TOKEN
,Value 为刚刚复制的 token,最初点击 Add Secret 按钮增加实现
步骤完结后,提交一个 pr 测试公布,在 Actions 菜单上面能够查看残缺的日志,公布胜利。
公布 github page
这里用到了 peaceiris/actions-gh-pages 插件,上面间接贴配置代码
create-githubpage:
needs: publish-npm
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v2
with:
node-version: 14
- name: page build
working-directory: ./example
run: |
yarn
yarn add react-m-editor
yarn build
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{secrets.PERSONAL_TOKEN}}
publish_dir: ./example/build
这里要留神几个问题
- 脚本运行的地位是在我的项目目录下的 example 文件夹中,要通过设置
working-directory
来配置工作文件夹,~ 而不是用命令行去 进入文件夹~。 - 组件和示例都是用了
react hook
去实现,本地打包组件后后再用打包好的组件去打包示例,会有 多个 react 版本问题,开发环境时能够通过 link 解决。在这里能够间接yarn add react-m-editor
装置最新版本的组件,之后打包的代码就不会呈现这个报错。
因为咱们打包后的代码是要上传到 github 上的,所以还有一个 github 的登录认证问题。actions-gh-pages 提供了三中登录认证:
认证 | 公有我的项目 | 公共我的项目 | 协定 | 是否须要设置 |
---|---|---|---|---|
github token |
✅ | ✅ | HTTPS | 不须要 |
deploy_key |
✅ | ✅ | SSH | 须要 |
personal_token |
✅ | ✅ | HTTPS | 须要 |
设置认证为 github_token
无需设置,按以下配置即可,点击查看设置文档。
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
github_token: ${{secrets.GITHUB_TOKEN}}
publish_dir: ./example/dist // 打包后动态界面的门路
设置认证为公私钥对 deploy_key
[点击查看如何配置公私钥)[https://github.com/peaceiris/…]
在本地终端运行以下命令行生成公私钥
ssh-keygen -t rsa -b 4096 -C "$(git config user.email)" -f gh-pages -N ""
# You will get 2 files:
# gh-pages.pub (公钥)
# gh-pages (私钥)
进入 github 网站 的我的项目目录下,抉择 Settings 菜单,抉择左侧的 Deploy keys 菜单,点击 Add deploy key 按钮,进入新增界面,勾选上 Allow write access,输出 Title,而后将本地生成的 gh-pages.pub
的内容复制到 Key 输入框中,点击 Add key 按钮,增加公钥胜利。
抉择左侧 Secrets 菜单,新增一个 Name 为 ACTIONS_DEPLOY_KEY 的 Repository secrets,Value 为 gh-pages
的内容,增加公钥胜利。
配置文件中相干局部配置如下:
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
deploy_key: ${{secrets.ACTIONS_DEPLOY_KEY}}
publish_dir: ./example/dist // react-m-editor 打包后的我的项目文件在这个文件夹中
设置认证为 personal_token
进入 Settings/Settings Developer settings 界面,抉择左侧的 Personal access tokens 菜单,点击 Generate new token 按钮,Node 输出 git-page key(这个本人取名),Expiration 选一个过期工夫,这边我抉择了 No Expiretion(用不过期),勾选 repo 选项,领有代码的读写权限,最初点击 Generate token 按钮生成 token。
复制生成的 token,进入我的项目界面 -> Settings -> Secrets,新增一个 Name 为 PERSONAL_TOKEN 的 Repository secrets,Value 为刚刚复制的 token。
配置文件中的相干配置如下:
- name: Deploy
uses: peaceiris/actions-gh-pages@v3
with:
personal_token: ${{secrets.PERSONAL_TOKEN}}
publish_dir: ./example/dist
留神:以上三中认证仅需配置一种
提交 pr 后测试,公布 github pages 胜利。
点击查看我的项目残缺的公布脚本配置。
参考
actions-gh-page 文档