利用github Actions釋出npm和release

歐懟懟發表於2021-07-30
GithubNPM

最近自己造了個輪子——ga-tracker，即適用於UniApp和微信小程式的谷歌統計 (Google Analytics) SDK，喜歡的朋友可以點個Star！

然而當每次更新或修復bugs的時候，都需要手動去更新npm包以及release包，因此就想嘗試一下利用github Actions來實現自動釋出npm和release。

關於github actions的學習，可以去看看官方文件

配置npmToken

當我們想使用github actions將檔案上傳到npm庫時，則需要在github配置一下npm access tokens。

來到npmjs下，登入你的賬號，然後點選Access Tokens。

然後點選Generate New Token建立一個新的Token。

然後選擇Automation，確定建立Token。

然後來到你的Github，選擇你的專案，點選Settings，然後選擇Secrets，點選New repository secret。

輸入名稱和Tokens，然後點選儲存。

編輯github actions配置檔案

在你的專案下，新建.github目錄，然後再新建一個workflows目錄，接著在裡面新建一個yml檔案。

github會自動檢測.github/workflows下的所有配置檔案，並在每一次連結到遠端倉庫的時候執行它們。

在編輯之前，我先簡單說明一下我的專案結構。

我的專案打包檔案都放在dist路徑下，在裡面除了打包檔案之外，還包含package.json和README.md，這兩個檔案是上傳到npm必需的。

接下來我們開始編輯配置檔案。

# action名稱
name: Push Release

# 當程式碼合併到master分支的時候，執行下列指令碼
on:
  push:
    branches: [ master ]

# 任務
jobs:
	# publish-npm任務
  publish-npm:
  	# 在ubuntu最新版本的虛擬機器執行
    runs-on: ubuntu-latest
    # 設定變數
    strategy:
      matrix:
        node-version: [ 12.x ]
    steps:
      # 檢查並切換到master分支
      - name: 檢查master分支
      	# 使用actions/checkout外掛
        uses: actions/checkout@master

      # 安裝node
      - name: 設定Node.js
      	# 使用actions/setup-node外掛
        uses: actions/setup-node@master
        with:
        	# node版本
          node-version: ${{ matrix.node-version }}

			# 初始化快取
      - name:  快取
        uses: actions/cache@v2
        id: cache-dependencies
        with:
          path: node_modules
          key: ${{runner.OS}}-${{hashFiles('**/yarn.lock')}}

			# 讀取當前版本號
      - name: 讀取當前版本號
        id: version
        uses: ashley-taylor/read-json-property-action@v1.0
        with:
        	# 讀取dist/package.json的，而不是根路徑下的package.json
          path: ./dist/package.json
          property: version

			# 釋出NPM包
      - name: 釋出NPM包
      	# 執行釋出程式碼
        run: |
          cd dist
          npm config set //registry.npmjs.org/:_authToken=$NPM_TOKEN
          npm publish
        env:
        	# 配置 npm access token 環境變數
          NPM_TOKEN: ${{secrets.NPM_ACCESS_TOKEN}}

			# 建立GitHub Release
      - name: 建立GitHub Release
        id: create_release
        uses: actions/create-release@latest
        env:
        	# 配置github token （這個無需去github配置，預設存在的）
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
        	# 標籤名
          tag_name: v${{steps.version.outputs.value}}
          # release名
          release_name: v${{steps.version.outputs.value}}
          # 是否為草稿
          draft: false
          # 是否為預釋出
          prerelease: false

			# 上傳Release Asset
      - name: 上傳Release Asset
        id: upload-release-asset
        uses: actions/upload-release-asset@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
        	# 上傳URL為建立GitHub Release步驟的輸出值，可通過配置的id獲取
          upload_url: ${{ steps.create_release.outputs.upload_url }}
          # 上傳檔案資訊
          asset_path: ./dist/index.js
          asset_name: index.js
          asset_content_type: application/js

			# 重新整理快取
      - name: 重新整理快取
        run: |
          curl https://purge.jsdelivr.net/npm/iemotion-pic@latest/dist/name.json
複製程式碼

執行github actions

當編輯好配置檔案後，只需將程式碼提交到github，併合併到master分支，github就會自動執行指令碼。

你也可以在專案主頁，點選actions選項檢視。

同時你可以點進去，進一步檢視執行情況，如果報錯了你也能準確定位到哪裡出問題了。

此時看看npm包和release，也都都更新到最新版本了。

相關文章