首页 > 其他分享 >如何构建和发布 npm 包到 GitHub Package Registry?

如何构建和发布 npm 包到 GitHub Package Registry?

时间:2024-11-27 14:33:13浏览次数:8  
标签:npm GitHub Package publish Step github gpr

如何构建和发布 npm 包到 GitHub Package Registry?

发表于  更新于  作者 小王爷 4 分钟阅读

本文将指导您在 GitHub Packages 上构建和发布 npm 到 GPR。

  • npm:全称 Node Package Manager,NodeJs 包管理和分发的工具。
  • GPR:全称 GitHub Package Registry,托管和管理软件包的平台,为常用包管理器提供不同的包仓库,如:npm、RubyGems、Apache Maven、Gradle、Docker 和 Nuget。GitHub 的 Container Registry 针对容器进行了优化,支持 Docker 和 OCI 镜像。

前提条件

  • 一个 npm 账号(npmjs.com)
  • 一个 GitHub 仓库
  • 了解 GitHub 和 Git 命令
  • GitHub Actions、CI/CD 和 YAML 的基础知识

操作步骤

Step 1:生成 GitHub token

  1. 登录 GitHub
  2. 点击头像
  3. 点击 Settings
  4. 点击 Developer settings
  5. 展开 Personal access tokens
  6. 点击 Tokens(classic)
  7. 点击 General new Token
  8. 点击 General new token(classic) 创建 token
  9. 设置 GitHub token 的权限:

2023-12-20_150601

  • 勾选 repo 下所有权限
  • 勾选 admin:repo_hook 下所有权限
  • 勾选 delete_repo 下所有权限

Step 2:创建库

使用 GitHub REST API 创建库,请将 <TOKEN> 替换为你的 GitHub token:

 
1
2
3
4
5
6
7
$ curl -L \
  -X POST \
  -H "Accept: application/vnd.github+json" \
  -H "Authorization: Bearer <TOKEN>" \
  -H "X-GitHub-Api-Version: 2022-11-28" \
  https://api.github.com/user/repos \
  -d '{"name":"publish-to-gpr","description":"使用 GitHub Actions 构建和发布 npm 包到 GitHub Package Registry。","homepage":"https://github.com/harrisonwang/publish-to-gpr"}'

Step 3:克隆到本地

上面的命令将创建一个空白的库,我们使用以下命令将它克隆到本地:

 
1
$ git clone git@github.com:HarrisonWang/publish-to-gpr.git

Step 4:创建 index.js 文件

 
1
2
3
4
5
6
7
8
# 切换至 publish-to-gpr 目录
$ cd publish-to-gpr

# 创建 README.md 文件
$ echo "# publish-to-gpr" >> README.md

# 创建 index.js 文件
$ echo 'console.log("Hello GPR!");' >> index.js

Step 5:初始化 npm 包

初始化 npm,生成 package.json 文件:

 
1
2
3
4
5
6
7
$ npm init
...
package name: (publish-to-gpr) @harrisonwang/publish-to-gpr
...
test command: exit 0
...
Is this OK? (yes) yes

@harrisonwang/publish-to-gpr:npm 包前面加 @harrisonwang ,代表 scopes 相关的包,可以理解为作用域包,作用域使我们创建和其他用户或组织的同名包,也不会发生冲突。

编辑 package.json 文件,添加以下配置设置要发布的 npm 包仓库和包作用域:

 
1
2
3
  "publishConfig": {
    "@harrisonwang:registry": "https://npm.pkg.github.com"
  }

Step 6:安装 npm 依赖包

生成 package-lock.json 文件:

 
1
$ npm i

Step 7:创建 GitHub Workflow 文件

新建 .github/workflows 目录:

 
1
$ mkdir -p .github/workflows/

创建 .github/workflows/publish.yml 文件,用于自动构建和发布 npm 包:

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
name: Node.js Package

on:
  release:
    types: [created]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v3
        with:
          node-version: 16
      - run: npm ci
      - run: npm test

  publish-gpr:
    needs: build
    runs-on: ubuntu-latest
    permissions:
      packages: write
      contents: read
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v3
        with:
          node-version: 16
          registry-url: https://npm.pkg.github.com/
      - run: npm ci
      - run: npm publish
        env:
          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

Step 8:提交并推送至 GitHub

 
1
2
3
4
5
$ git add .

$ git commit -m "workflow to publish package"

$ git push

Step 9:创建 Tag 发布到 GPR

仓库首页点击 Create a new release:

image-20231220153510297

创建 Tag:

image-20231220153649146

输入版本号点击 Publish release 发布:

image-20231220153737981

可以看到我们已经成功打包源代码包:

image-20231220153811036

然后我们在 GitHub Actions 中查看 workflow 的运行情况,可以看到已运行成功:

image-20231220154011215

至此,已成功发布到 npm 包到 GitHub Package Registry:

image-20231220154117241

总结

GitHub 允许你在它上面构建、发布和访问 npm 包,使得你的包能够通过 GitHub Packages 进行集中管理和分发。

标签:npm,GitHub,Package,publish,Step,github,gpr
From: https://www.cnblogs.com/ministep/p/18572252

相关文章

  • pnpm 是如何颠覆 npm 和 yarn 的?
    今天研究了一下pnpm的机制,发现它确实很强大,甚至可以说对yarn和npm形成了降维打击。我们从包管理工具的发展历史,一起看下到底好在哪里?npm2在npm3.0版本之前,项目的node_modules会呈现出嵌套结构,也就是说,我安装的依赖、依赖的依赖、依赖的依赖的依赖...,都是递归嵌套的......
  • 解决npm install openai报错
    在下载module时出现错误npminstallopenai(node:25160)MaxListenersExceededWarning:PossibleEventEmittermemoryleakdetected.11closelistenersaddedto[TLSSocket].Useemitter.setMaxListeners()toincreaselimit(Use`node--trace-warnings...`tosho......
  • pnpm -F @opentiny/tiny-engine-controller -F @opentiny/tiny-engine-dsl-vue build
    pnpm-F@opentiny/tiny-engine-controller-F@opentiny/tiny-engine-dsl-vuebuild命令的作用是使用pnpm包管理器对指定的工作区包进行构建。具体来说:pnpm:这是Node.js的包管理器,类似于npm,但更高效,支持工作区(workspace)管理。-F或--filter:这是一个选项,用于筛选特定的工......
  • Android PMS(Package Manager Service)源码介绍
    文章目录前言一、PMS启动流程二、APK安装流程三、APK卸载流程四、权限管理静态权限动态权限五、数据存储与一致性六、PMS的安全性策略1、权限检查2、签名认证3、动态权限管理4、应用安装验证5、保护系统目录七、PMS调试方法总结前言PackageManagerService(......
  • 2024年11月24日Github流行趋势
    项目名称:FreeCAD项目维护者:@wwmayer,@yorikvanhavre,@berndhahnebach,@chennes,@WandererFan等项目介绍:FreeCAD是一个免费且开源的多平台3D参数化建模工具。项目star数:20,875项目fork数:4,117项目名称:screenshot-to-code项目维护者:@abi,@clean99,@sweep-ai,@kach......
  • github加速 DevSidecar 1.8.8
    DevSidecar1.8.8更多配置请参考:github开源......
  • github上最火的大模型教程-免费!
    大型语言模型(LLM)的课程路线图LLM课程分为三个部分:......
  • github pages + hugo 搭建静态博客网站
    体验地址1.起因,目的:其实6年前,我就写过这个。项目代码博客地址最近想改写一下。github推荐的主题是Jekyll,我当时用的就是这个,感觉很麻烦。尤其是文章命名。新的主题hugo用起来还行。2.过程:过程记录,需要详细!因为问题非常多!3.参考教程:视频教程:ht......
  • 24K star!告别199韭菜课,来GitHub免费学大模型
    现在的网上充斥着各种AI课程,比如李一舟的199课程。今天推荐一个开源项目,它帮你整理好了大模型学习的roadmap,有资料有代码还免费,它就是:llm-course。llm-course是什么?本项目的内容是一个针对大语言模型的课程,在之前的热点汇总中和大家提过,当时项目内容没有完整,缺了LLM工程......
  • npm uninstall screenfull --legacy-peer-deps
    下面是解决此错误的几种方法:1.清空缓存在终端中运行下面的命令清空npm缓存:npmcacheclean--force然后重新安装依赖包。2.使用--force在安装或更新命令后面加上 --force 选项,强制解析依赖树并安装依赖包。npminstall--force请注意,这种方法可能会引入不兼容......