使用 Github Actions 自动发布包到 NPM 官网上

最新推荐文章于 2024-08-20 13:48:56 发布

biaov

最新推荐文章于 2024-08-20 13:48:56 发布

阅读量965

点赞数 11

分类专栏： Git 文章标签： github npm 前端

复用，共享，解耦，Ctrl C + Ctr V

本文链接：https://blog.csdn.net/biao_feng/article/details/136657070

版权

Git 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

当我们在开发一个依赖时，我们需要发布到 npm 官网上，这样其他人才能使用我们的包。
但是每次都要手动执行 npm publish 命令，或者二次校验才能发布，这样就会很麻烦。

方式

自己写一个 node 脚本，然后在本地执行，这样就可以自动发布了。
利用 Github Actions 再开源项目上配置自动发布，例如触发条件是 git 创建 tag 就执行发布。这里介绍的是第二种方式。

配置

在 npm 官网上生成自动化授权 token

打开 npm 官网，登录自己的账号。
点击头像，选择 Access Tokens 选项。
点击 Generate New Token 按钮，选择 Classic Token 选项。
输入名称，不限制，例如：NPM_TOKEN；单选选择 Automation 选项。
点击 Generate Token 按钮生成 token，复制保存生成的 token，防止丢失，不要泄漏出去。

在 Github 项目上配置 Secrets

如果没有注册，则先注册并创建一个项目。
打开 Github 项目，点击 Settings 选项。
新创建的项目，默认是开启 Actions 功能的，如果没有开启，需要手动在 Settings 里的 Actions > General 选项开启。
点击 Secrets and variables 下的 Actions 选项，点击 New repository secret 按钮。
name：输入 NPM_TOKEN，value：输入刚才生成的 token，点击 Add secret 按钮保存。

创建 .github 工作流代码

在项目根目录下创建 .github/workflows 目录。
在 .github/workflows 目录下创建 publish.yml 文件。
publish.yml 文件内容如下：

# .github/workflows/publish.yml

name: Publish Package to npmjs

on:
  push:
    tags:
      - 'v*'

jobs:
  build:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      id-token: write
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: '20.x'
          registry-url: 'https://registry.npmjs.org'
      - run: npm install -g npm
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

name：任务名称。
on：触发条件，这里是 git 创建 tag 时触发。
jobs：任务列表。
build：任务名称。
runs-on：运行环境。
permissions：权限设置。
steps：步骤列表。
- uses：使用的 action。
- with：参数设置。
- run：执行命令。
- env：环境变量设置。这里的 NPM_TOKEN 就是上面配置的 Secrets 的 name。

创建 package.json 文件

在项目根目录下创建 package.json 文件。
执行一下命令

npm init -y

配置 Provenance 选项
也可以使用其它方式配置，更多配置请参考官方文档

{
  "publishConfig": {
    "registry": "https://registry.npmjs.org/",
    "provenance": true
  }
}

完整代码参考

{
  "name": "mine-npm-demo",
  "version": "1.0.0",
  "description": "This is a sample demo about npm",
  "main": "index.js",
  "private": false,
  "scripts": {},
  "keywords": [
    "npm",
    "demo"
  ],
  "engines": {
    "node": ">=20"
  },
  "type": "module",
  "author": {
    "name": "biaov",
    "email": "biaov@qq.com"
  },
  "license": "ISC",
  "repository": {
    "type": "git",
    "url": "git+https://github.com/biaov/mine-npm-demo.git"
  },
  "homepage": "https://github.com/biaov/mine-npm-demo",
  "bugs": {
    "url": "https://github.com/biaov/mine-npm-demo/issues"
  },
  "publishConfig": {
    "registry": "https://registry.npmjs.org/",
    "provenance": true
  },
  "contributors": [
    {
      "name": "biaov",
      "email": "biaov@qq.com"
    }
  ]
}