利用github Actions發佈npm和release

最近本身造了個輪子——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，也都都更新到最新版本了。