快捷導(dǎo)航

使用Github?Actions發(fā)布npm包完整過程詳解

更新時(shí)間：2023年09月12日 09:37:47 作者：HerryLo

本文包含本地發(fā)布npm包發(fā)布流程,?和?github?action自動(dòng)發(fā)布npm包流程,幫助你更好的發(fā)布自己或公司的npm包,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

本地發(fā)布npm包

發(fā)布本地npm包首先需要初始化npm，設(shè)置npm源，登錄npm，發(fā)布npm

初始包

npm init

生成 package.json包，如下是我的 package.json配置：

{
  "name": "vuepress-plugin-md-tags", // 包名
  "version": "1.0.7", // 版本
  "description": "vuepress@1.x plugin", // 描述
  "main": "index.js", // 入口文件
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": { // 倉(cāng)庫(kù)
    "type": "git",
    "url": "https://github.com/HerryLo/vuepress-plugin-md-tags.git"
  },
  "keywords": ["vuepress@1.x", "vuepress-plugin", "tags"], // 關(guān)鍵字
  "author": "herrylo3", // 作者
  "license": "ISC", // license
  "bugs": {
    "url": "https://github.com/HerryLo/vuepress-plugin-md-tags/issues"
  },
  "homepage": "https://github.com/HerryLo/vuepress-plugin-md-tags"
}

設(shè)置npm源

npm config set registry https://registry.npmjs.org/
或者
nrm set npm

如果你發(fā)布包到公有npm平臺(tái)，設(shè)置 https://registry.npmjs.org/即可，如果是私有平臺(tái)，記得設(shè)置私有npm源。

登錄npm

npm login

本地執(zhí)行命令 npm login 進(jìn)行登錄，需要輸入你的 npm用戶名、密碼、郵箱地址，還有郵箱驗(yàn)證碼，都搞完，才算是本地登錄成功。

發(fā)布包

在包目錄下，本地執(zhí)行命令執(zhí)行命令 npm publish

npm publish

每次發(fā)布包時(shí)，記得修改 package.json 下的vesion版本號(hào)！

Github Action發(fā)布npm包

首先你肯定需要把代碼上傳到Github上，之后設(shè)置Github Action配置文件，在npm上生成 Granular Access Token，再在Github Action上設(shè)置 Actions secrets 字段。

::: tip
介紹以下內(nèi)容時(shí)，默認(rèn)你的代碼以上傳到Github↓↓
:::

Github Action配置文件

生成你自己項(xiàng)目的Github Action配置文件，Github有提供模板，選擇圖片中框出的模板即可

下面是我自己的配置文件

# 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://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
name: Node.js Package
on:
  release:
    types: [created]
  push:
        #分支可以選擇多個(gè)，如：master、main、release
      #監(jiān)聽main分支的push操作，只要main分支發(fā)生push操作，即會(huì)運(yùn)行發(fā)布代碼
    branches:
      - main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          registry-url: https://registry.npmjs.org/
      - run: npm install
      - run: npm publish
        env:
            # 通過NPM_TOKEN，Github Action才可以直接發(fā)布
          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}

添加npm token

生成token之后，馬上復(fù)制，刷新之后就看不見了。之后將token，設(shè)置到github項(xiàng)目setting中

記得點(diǎn)擊Add secret按鈕哦！

自動(dòng)發(fā)布包

on:
  release:
    types: [created]
  push:
        #分支可以選擇多個(gè)，如：master、main、release
      #監(jiān)聽main分支的push操作，只要main分支發(fā)生push操作，即會(huì)運(yùn)行發(fā)布代碼
    branches:
      - main

設(shè)置的為每次 push 或 merge 會(huì)觸發(fā) github actions 自動(dòng)發(fā)布包。當(dāng)然，如何監(jiān)聽觸發(fā)，你可以自己修改。