如何使用GitHub Packages创建npm私有库

介绍

GitHub Packages是GitHub提供的类似npm包管理工具或平台，通过GitHub Packages，我们可以直接使用npm相关的命令、功能，并且不用将自己的npm包发布到npm仓库。也就是说，我们的npm包将托管在github上，并且可以和我们相应的仓库保持同步。之前，我们介绍了如何发布代码到npm官方仓库、verdaccio+ngrok发布npm私有仓库以及基于github实现npm私有库的搭建，通过这篇文章：基于github实现npm私有库的搭建可以知道，我们可以创建自己的npm私有库，但是我们只能通过链接的方式安装npm私有包，不能使用npm的相关命令，比如npm version patch等等。今天，我们还继续讲npm私有库，还是基于github，与基于github实现npm私有库的搭建不同的是，今天我们要讲的npm私有库是GitHub官方于2019年5月推出的GitHub Packages--类似npm包管理器，通过GitHub Packages，我们不仅可以创建npm私有包，使用私有仓库，并且还可以使用npm的相关命令，也能通过以包名的形式来安装依赖，更重要的是，我们还可以将多个包（packages）放在同一个私有仓库当中，这样就可以统一管理，而不必一个npm私有包对应一个github仓库，简直太完美了。

GitHub Packages看起来是这个样子

github packages.png

创建私有仓库

步骤

create repo.png

私有仓库看起来是下面这个样子

repo like.png

如果你还是不清楚怎么创建私有仓库，那就只能自己Google或者百度了。

克隆私有仓库到本地

git clone git@github.com:lchenfox/npm-repo.git

创建Personal access tokens

进入github设置，点击Developer settings

dev setting.png

依次点击1、2

tokens.png

如下图，然后往下滑，点击底部按钮 `Generate token`

generate token.png

保存token

save token.png

注意：图中红框的token必须保存，因为只会在生成的时候显示一次，后面你是看不到的，而这个token一定会用到！！！

创建npm包

初始化

init.png

命令npm init --scope=lchenfox中的lchenfox必须是你的github用户名，其他随便填写一些description和author，然后一路回车就好。

配置

有2中配置方式，第一种是在package.json所在目录创建一个.npmrc文件，另一种方式是直接修改package.json文件并增加publishConfig项，任选其一即可。

方式1，创建.npmrc（推荐）

创建.npmrc文件，并添加以下内容

registry=https://npm.pkg.github.com/lchenfox

再次提醒一次，lchenfox是你的github用户名。

方式2，添加publishConfig

在package.json中添加以下内容

"publishConfig": {
    "registry":"https://npm.pkg.github.com/"
},

添加后package.json看起来内容类似下面

{
  "name": "@lchenfox/npm-repo",
  "version": "1.0.0",
  "description": "A npm demo",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/lchenfox/npm-repo.git"
  },
  "publishConfig": {
    "registry":"https://npm.pkg.github.com/"
  },
  "author": "langke",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/lchenfox/npm-repo/issues"
  },
  "homepage": "https://github.com/lchenfox/npm-repo#readme"
}

注意：0fc31c688a4a75f9509444b4648ac8e5fbeb20c4是token，另外前缀//一定不能少，否则授权一定失败。事实上，无论是发布npm包还是在项目里面安装npm包，当前目录下的.npmrc里面的//npm.pkg.github.com/:_authToken=0fc31c688a4a75f9509444b4648ac8e5fbeb20c4只针对当前npm包或当前项目有效，你在另一个npm包目录下或另一个项目下是不生效的。比如，如果在first-package目录下的.npmrc中添加//npm.pkg.github.com/:_authToken=0fc31c688a4a75f9509444b4648ac8e5fbeb20c4的话，你在second-package里面也必须单独添加来授权特定的包。问题来了，这样做岂不是很麻烦？如果我想要我的所有项目都生效的情况下怎么办？我们还有另一个办法，就是将//npm.pkg.github.com/:_authToken=0fc31c688a4a75f9509444b4648ac8e5fbeb20c4添加到~/.npmrc用户目录里面，这样的话，它就属于一个全局变量，在这台电脑上无论是哪一个项目或npm包，都可以使用了。

方式2

$ npm login --registry=https://npm.pkg.github.com
> Username: USERNAME
> Password: TOKEN
> Email: PUBLIC-EMAIL-ADDRESS

USERNAME是你的github用户名，Password就是刚才的token，邮箱虽然可以随便填写，为了规范，最好填写你的github邮箱。

登录成功类似以下输出

➜  npm-repo git:(master) ✗ npm login --registry=https://npm.pkg.github.com
Username: lchenfox
Password:
Email: (this IS public) lchenfox@foxmail.com
Logged in as lchenfox on https://npm.pkg.github.com/.

发布

执行npm publish命令发布

➜  npm-repo git:(master) ✗ npm publish
npm notice
npm notice 📦  @lchenfox/npm-repo@1.0.0
npm notice === Tarball Contents ===
npm notice 536B package.json
npm notice 65B  README.md
npm notice === Tarball Details ===
npm notice name:          @lchenfox/npm-repo
npm notice version:       1.0.0
npm notice package size:  437 B
npm notice unpacked size: 601 B
npm notice shasum:        ac8fe26f6cdd65d9bf8f992d56e5f30cc09697ec
npm notice integrity:     sha512-qMlraog/O+uv1[...]GC4/dRBwXgOnA==
npm notice total files:   2
npm notice
+ @lchenfox/npm-repo@1.0.0

从上面可以看到，@lchenfox/npm-repo@1.0.0发布成功，包名是@lchenfox/npm-repo，版本号是1.0.0。

提示：当使用npm publish发布结束后，一般也会将代码修改同步提供到github仓库，这样的话，npm包和github仓库的内容就一直会保持一致。当然，如果你说我只需要npm包，又不需要管github仓库是什么，那也可以，但是，如果你不提交到github仓库，使其和npm包保持一致的话，那么当你换一台电脑要修改并且发布这个npm包时，就有可能出现版本和内容在两台电脑上都不一样的情况。比如，你在当前电脑发布了一个v1.1.0版本的npm包，在此之前，版本号是v1.0.3，发布v1.1.0之后，你没有提交到github远程仓库，当你在另一台电脑上把仓库克隆下来，package.json版本依然是v1.0.3（因为你的v1.1.0并没有提交），你修改了点内容，然后npm version patch将版本号修改为v1.0.4，然后npm publish发布后，你远程的npm包将以最新的一次发布即v1.0.4的内容为准，那么之前修改的v1.1.0的内容不起任何作用，这样的话，我们就难以保证版本号和内容的统一。因此，强烈建议发布npm包后，立即将改动的代码提交到远程的github仓库。

查看发布的npm包

publish success.png

点击npm-repo，查看到npm详情

npm repo.png

提交代码到远程私有仓库

为了方便演示，添加一个index.js文件，并添加以下内容

export function printHello() {
    console.warn("Hello");
}

然后将代码提供到远程私有仓库

git add . && git commit -m "init commit" && git push

远程仓库看起来是这样

remote repo.png

使用npm包

创建`.npmrc`

这里在项目里面创建.npmrc和上面的.npmrc完全一样，你也可以直接复制到项目中就行。

项目根目录下（node_modules所在的目录），创建.npmrc文件，并添加以下内容

registry=https://npm.pkg.github.com/lchenfox

登录（同创建npm包一样，有2种方式）

npm login --registry=https://npm.pkg.github.com

如果在同一台电脑上登录过就不用再登录了。

安装`npm`包

执行

npm install @lchenfox/npm-repo@1.0.0

还可以按照上图中的修改package.json安装。

安装成功如下

➜  testdemo npm install @lchenfox/npm-repo@1.0.0           
+ @lchenfox/npm-repo@1.0.0
added 1 package from 1 contributor in 9.556s

node-modules.png

使用

import {printHello} from '@lchenfox/npm-repo';

printHello(); // Hello

发布多个npm包到同一个私有仓库

上面我们只讲了如何发布一个npm包到一个私有仓库, 但是有时候，我们想将多个npm包发布到同一个github私有仓库中存放，因为一个npm包创建一个私有仓库简直太TM麻烦了，一个私有仓库管理多个npm包在使用上非常方便，也便于管理。

创建npm包

首先我们把仓库克隆到本地，比如这里的仓库名是npm-repo，进入到/npm-repo目录下，目前我们只有一个README.md文件，这个是创建github私有仓库的时候初始化的一个文件。然后，我们创建2个文件夹来作为2个npm包的目录，分别为first-package、second-package

mkdir first-pacakge second-package

进入到first-package里面

➜  first-pacakge git:(master) npm init --scope=lchenfox
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
  1 {
and exactly what they do.
  1 export function printHello1() {

  1 # Getting started
Use `npm install <pkg>` afterwards to install a package and
  1 registry=https://npm.pkg.github.com/lchenfox
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (@lchenfox/first-pacakge)
version: (1.0.0)
description: first-pacakge
entry point: (index.js)
test command:
git repository: git@github.com:lchenfox/npm-repo.git
keywords: npmdemo
author: langke
license: (ISC)
About to write to /Users/langke/TestReactNative/github-packages/npm-repo/first-pacakge/package.json:

{
  "name": "@lchenfox/first-pacakge",
  "version": "1.0.0",
  "description": "first-pacakge",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/lchenfox/npm-repo.git"
  },
  "keywords": [
    "npmdemo"
  ],
  "author": "langke",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/lchenfox/npm-repo/issues"
  },
  "homepage": "https://github.com/lchenfox/npm-repo#readme"
}

Is this OK? (yes)

上面我选填了description、author、keywords，其实这些项也可以不填，但是必须注意的是 git repository: git@github.com:lchenfox/npm-repo.git 是必填项，git@github.com:lchenfox/npm-repo.git是你的github私有仓库地址。如果你忘记填写git repository，也没有关系，可以初始化结束后编辑pacage.json文件，添加以下内容

"repository" : {
    "type" : "git",
    "url": "ssh://git@github.com/lchenfox/npm-repo.git",
},

其中，type就是git, url就是私有仓库地址，其中，lchenfox是github用户名， npm-repo是私有仓库名。

然后按照上面的步骤依次添加publishConfig到pacage.json、创建.npmrc文件、登录，另外为了方便演示，分别在
first-package、second-package创建README.md和index.js文件。

最终，first-package共有4个文件：.npmrc、README.md、index.js、package.json，内容如下

➜  first-pacakge git:(master) ✗ l
total 32
drwxr-xr-x  6 langke  staff   192B Dec 27 09:32 .
drwxr-xr-x  6 langke  staff   192B Dec 27 09:22 ..
-rw-r--r--  1 langke  staff    45B Dec 27 09:32 .npmrc
-rw-r--r--  1 langke  staff    33B Dec 27 09:32 README.md
-rw-r--r--  1 langke  staff    59B Dec 27 09:32 index.js
-rw-r--r--  1 langke  staff   581B Dec 27 09:31 package.json

➜  first-pacakge git:(master) ✗ cat .npmrc
registry=https://npm.pkg.github.com/lchenfox

➜  first-pacakge git:(master) ✗ cat README.md
# Getting started

first package

➜  first-pacakge git:(master) ✗ cat index.js
export function printHello1() {
    console.warn("hello1");
}

➜  first-pacakge git:(master) ✗ cat package.json
{
  "name": "@lchenfox/first-pacakge",
  "version": "1.0.0",
  "description": "first-pacakge",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "publishConfig": {
    "registry":"https://npm.pkg.github.com/"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/lchenfox/npm-repo.git"
  },
  "keywords": [
    "npmdemo"
  ],
  "author": "langke",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/lchenfox/npm-repo/issues"
  },
  "homepage": "https://github.com/lchenfox/npm-repo#readme"
}

second-package内容如下

➜  second-package git:(master) ✗ l
total 32
drwxr-xr-x  6 langke  staff   192B Dec 27 10:05 .
drwxr-xr-x  6 langke  staff   192B Dec 27 09:22 ..
-rw-r--r--  1 langke  staff    45B Dec 27 10:05 .npmrc
-rw-r--r--  1 langke  staff    34B Dec 27 09:54 README.md
-rw-r--r--  1 langke  staff    59B Dec 27 09:54 index.js
-rw-r--r--  1 langke  staff   583B Dec 27 09:54 package.json

➜  second-package git:(master) ✗ cat .npmrc
registry=https://npm.pkg.github.com/lchenfox

➜  second-package git:(master) ✗ cat README.md
# Getting started

second package

➜  second-package git:(master) ✗ cat index.js
export function printHello2() {
    console.warn("hello2");
}

➜  second-package git:(master) ✗ cat package.json
{
  "name": "@lchenfox/second-pacakge",
  "version": "1.0.0",
  "description": "second-pacakge",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "publishConfig": {
    "registry":"https://npm.pkg.github.com/"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/lchenfox/npm-repo.git"
  },
  "keywords": [
    "npmdemo"
  ],
  "author": "langke",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/lchenfox/npm-repo/issues"
  },
  "homepage": "https://github.com/lchenfox/npm-repo#readme"
}

另外一般会添加一个.gitignore文件用于忽略掉如.idea、.DS_Store文件，还会添加一个CHANGELOG.md文件用于描述每一个版本的变更，这样才更方便npm使用者。

然后执行npm publish发布到GitHub Packages，如图

mul-packages.png

可以看到，两个npm包分别为first-package、second-package，都发布到了GitHub Packages，并且都放到同一个仓库（npm-repo）当中，最后别忘记了将代码提交到远程的私有仓库中。

使用

和上面的使用是一样的，我们来安装一下

npm install @lchenfox/first-pacakge@1.0.0
npm install @lchenfox/second-pacakge@1.0.0

安装成功后，在项目的node_modules里面看起来如下

multiple-packages.png

导入使用

import {printHello1} from '@lchenfox/first-pacakge';
import {printHello2} from '@lchenfox/second-pacakge';

printHello1(); // hello1
printHello2(); // hello2

到此，我们就知道如何使用GitHub Packages来创建npm私有库了。

总结

必须注意：本文所有lchenfox一定是你自己的github用户名，所有_authToken一定是你自己的Personal access tokens。

发布npm包必须满足两个条件

第1点，要么创建.npmrc文件，里面添加registry=https://npm.pkg.github.com/lchenfox，要么就直接在package.json中添加publishConfig
第2点，要么在.npmrc（如果没有就创建一个）文件中添加//npm.pkg.github.com/:_authToken=0fc31c688a4a75f9509444b4648ac8e5fbeb20c4授权，要么使用npm login --registry=https://npm.pkg.github.com登录授权

安装npm包必须满足两个条件

第1点，必须在项目根目录下（node_modules所在目录）创建.npmrc并且添加registry=https://npm.pkg.github.com/lchenfox
第2点，同以上发布npm包的第2点

使用GitHub Packages来创建和托管npm包非常方便，我们可以使用npm的相关命令，发布、安装方式基本和npm一样，使用这种方式来创建属于我们自己的私有库，维护起来也很简单，和之前的几种方式比起来，我个人觉得这种方式很适合搭建(或许只能说创建？)公司内部的npm私有库。

更多详情，请查看官方：Managing packages with GitHub Packages。

个人博客地址

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 211,817评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 90,329评论 3赞 385
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 157,354评论 0赞 348
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 56,498评论 1赞 284
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 65,600评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 49,829评论 1赞 290
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,979评论 3赞 408
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 37,722评论 0赞 266
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,189评论 1赞 303
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,519评论 2赞 327
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,654评论 1赞 340
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,329评论 4赞 330
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,940评论 3赞 313
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,762评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,993评论 1赞 266
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,382评论 2赞 360
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,543评论 2赞 349

如何使用GitHub Packages创建npm私有库

介绍

创建私有仓库

步骤

私有仓库看起来是下面这个样子

克隆私有仓库到本地

创建Personal access tokens

进入github设置，点击Developer settings

依次点击1、2

如下图，然后往下滑，点击底部按钮 Generate token

保存token

创建npm包

初始化

配置

登录

发布

查看发布的npm包

提交代码到远程私有仓库

使用npm包

创建.npmrc

登录（同创建npm包一样，有2种方式）

安装npm包

使用

发布多个npm包到同一个私有仓库

创建npm包

使用

总结

发布npm包必须满足两个条件

安装npm包必须满足两个条件

推荐阅读更多精彩内容

如下图，然后往下滑，点击底部按钮 `Generate token`

创建`.npmrc`

安装`npm`包