史上最贴心NPM私服搭建辅导


故园应露白，凉夜又秋分。月皎空山静，天清一雁闻。—— 《客中秋夜》，孙作

  • 微信公众号 《JavaScript全栈》
  • 掘金 《合一大师》
  • Bilibili 《合一大师》
  • verdaccio

相关步骤讲解已同步录制视频，如有需要请移步 B站 或 微信公众号

前言

在工作中，我们常常会开发很多通用性代码，比如我们之前给大家讲解过的UI库、工具类、公用业务逻辑代码等。这些代码我们如何发挥它的价值呢？这时可将这些库发布到npm，需要的项目安装使用即可，但是发布到公网npm无法保证源码的私密性，这时我们就需要使用到私有npm仓库。

私有npm仓库优势

  1. 只能在公司局域网使用，保证了代码的私密性
  2. 因为使用局域网，依赖包下载更快
  3. 可以将发布和安装npm的包进行权限配置，利于npm仓库的维护
  4. 修改了第三方npm包，但是发布包的作者未将PR合并到master，导致该功能无法在安装包后引用，这时我们可以将三方包源码修改，发布于私有仓库，即可下载安装，而不用在 node_modules 中更改源码

使用 Verdaccio

Verdaccio 是用 nodejs 开发的轻量级私有npm代理服务，因此使用 Verdaccio 前需要安装 node 。如何安装node不是我们这篇文章的重点，可自行搜索资料安装node。

安装 Verdaccio

使用 npm 安装 Verdaccio ，需要全局安装，所以注意权限问题。

1
npm install -g verdaccio

安装完以后，执行

1
verdaccio -h

出现版本号相关提示则表示安装成功。如果提示命令找不到，请重启控制台。

运行 verdaccio

运行 verdaccio 命令很简单，执行verdaccio即可。

1
verdaccio

这时，执行结果如下所示

1
2
3
4
 warn --- config file  - /root/.config/verdaccio/config.yaml
 warn --- Plugin successfully loaded: htpasswd
 warn --- Plugin successfully loaded: audit
 warn --- http address - http://localhost:4873/ - verdaccio/4.4.0

这是提示我们，verdaccio 的配置文件放在了用户目录下的 .config/verdaccio/config.yaml 中，编辑该文件即可修改对于 verdaccio 的配置。相关配置我们在后一段落介绍。

打开浏览器，输入 localhost:4873，就能看到用于展示包的网页，因为我们目前还没有上传任何包，所以该页面为空，并且提示发布包到该仓库。

配置 verdaccio

verdaccio 的配置文件为 ~/.config/verdaccio/config.yaml ，使用编辑器或者 vim 打开该文件，verdaccio 默认配置如下

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
#
# This is the default config file. It allows all users to do anything,
# so don't use it on production systems.
#
# Look here for more config file examples:
# https://github.com/verdaccio/verdaccio/tree/master/conf
#
# path to a directory with all packages
storage: ./storage
# path to a directory with plugins to include
plugins: ./plugins
web:
  title: Verdaccio
  # comment out to disable gravatar support
  # gravatar: false
  # by default packages are ordercer ascendant (asc|desc)
  # sort_packages: asc
auth:
    # max_users: 1000
# a list of other known repositories we can talk to
uplinks:
  npmjs:
    url: https://registry.npmjs.org/
packages:
  '@*/*':
    # scoped packages
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    proxy: npmjs
  '**':
    # allow all users (including non-authenticated users) to read and
    # publish all packages
    #
    # you can specify usernames/groupnames (depending on your auth plugin)
    # and three keywords: "$all", "$anonymous", "$authenticated"
    access: $all
    # allow all known users to publish/publish packages
    # (anyone can register by default, remember?)
    publish: $authenticated
    unpublish: $authenticated
    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs
# You can specify HTTP/1.1 server keep alive timeout in seconds for incoming connections.
# A value of 0 makes the http server behave similarly to Node.js versions prior to 8.0.0, which did not have a keep-alive timeout.
# WORKAROUND: Through given configuration you can workaround following issue https://github.com/verdaccio/verdaccio/issues/301. Set to 0 in case 60 is not enough.
server:
  keepAliveTimeout: 60
middlewares:
  audit:
    enabled: true
# log settings
logs:
  - { type: stdout, format: pretty, level: http }
  #- {type: file, path: verdaccio.log, level: info}
#experiments:
#  # support for npm token command
#  token: false

以下介绍重要参数的含义

storage

配置发布到私有仓库包的存放地址，默认存放于 ~/.config/verdaccio/storage 中，我们可以定期将该文件中的内容进行清理，但是一定要谨慎，因为该文件夹中存放的包不止我们自己发布的，还有一些从公有仓库中拉取并缓存的包（具体如何配置拉取缓存，后续参数介绍）。

uplinks

也许，我们的包不止发布到了一个仓库，如果公司按照业务线划分了几个前端部门，部门之间技术独立但能共享，这时如果我们想在使用自己发布的npm私有包的同时，还期望可以使用其他团队开发的npm包，这时我们就可以通过指定该参数实现。换句话说，npm公有仓库也能理解为我们的另一个仓库，像这样的仓库还有淘宝的仓库等。配置如下，在这里其实只是做一个定义，真正的使用其实是在包 packages 管理的参数中

1
2
3
4
5
6
7
8
9
10
11
uplinks:

npmjs:


url: https://registry.npmjs.org

taobao:


url: https://registry.npm.taobao.org/

packages

该参数是整个配置中最为重要的一个，因为通过配置该参数，能达到设定包权限，设定包发布与使用的权限，设置包是否代理到公有npm仓库等

1
2
3
4
5
6
7
8
9
10
11
packages:
  '@heyi/*':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
  '**':
    access: $all
    publish: $authenticated
    unpublish: $authenticated
    # if package is not available locally, proxy requests to 'npmjs' registry
    proxy: npmjs

通过以上参数的配置，我们就约定了，如果你发布的包是 @heyi 前缀的，那就表明是私有包，不会代理到外部。如果发布的包没有 @heyi 前缀，则会走 ** 的逻辑，即所有不包含 @heyi 前缀的包，不难看出，proxy: npmjs 指明了如果该包上传则会被代理到npm公有仓库，如果在下载某个不包含 @heyi 前缀的包时，会自动代理到npm公有仓库查找资源并下载，并且默认会将拉取的资源缓存到我们前面指定的 storage 文件夹中。

listen

相信开发过后端的同学都不会陌生，服务启动在什么端口，verdaccio默认监听在4873端，我们可以通过指定 listen 参数修改配置

1
2
3
listen:

0.0.0.0: 3000

设置完重启 verdaccio，端口便监听在了3000

到这里npm私有仓库的配置启动就完成了，接下来我们就可以开发包并发布了，但在这之前，推荐大家一个管理npm源的工具，nrm 。

优雅地方式设置npm源

安装 nrm

使用 npm 安装 nrm

1
npm i -g nrm

查看 nrm帮助

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
?  ~ nrm -h
Usage: nrm [options] [command]
Options:
  -V, --version                           output the version number
  -h, --help                              output usage information
Commands:
  ls                                      List all the registries
  current                                 Show current registry name
  use <registry>                          Change registry to registry
  add <registry> <url> [home]             Add one custom registry
  set-auth [options] <registry> [value]   Set authorize information for a custom registry with a base64 encoded string or username and pasword
  set-email <registry> <value>            Set email for a custom registry
  set-hosted-repo <registry> <value>      Set hosted npm repository for a custom registry to publish packages
  del <registry>                          Delete one custom registry
  home <registry> [browser]               Open the homepage of registry with optional browser
  publish [options] [<tarball>|<folder>]  Publish package to current registry if current registry is a custom registry.
   if you're not using custom registry, this command will run npm publish directly
  test [registry]                         Show response time for specific or all registries
  help                                    Print this help

列出当前 nrm 存储的npm源

1
nrm ls

结果如下

1
2
3
4
5
6
7
8
?  ~ nrm ls
  npm -------- https://registry.npmjs.org/
  yarn ------- https://registry.yarnpkg.com/
  cnpm ------- http://r.cnpmjs.org/
* taobao ----- https://registry.npm.taobao.org/
  nj --------- https://registry.nodejitsu.com/
  npmMirror -- https://skimdb.npmjs.com/registry/
  edunpm ----- http://registry.enpmjs.org/

使用指定源

比如我们现在想使用npm官方源

1
nrm use npm

添加用户自定义的源

添加命令很简单，只需要指定源名和源地址即可

1
nrm add heyi 47.94.248.23:3000

再运行查看命令就能发现，列表中多了一条记录，正是我们添加的源

登录npm

注意，登录前一定要保证此时的npm源是指向我们私有仓库的，使用nrm即可完成切换

1
nrm use heyi

添加用户

如果是第一次登录，则需要注册用户，如果服务未做特殊权限的设置，直接添加用户即可，命令如下

1
npm addUser

跟随提示填写用户名、密码、邮箱即可

发布包

1
npm publish

因为不是npm发布相关的极少，所以关于发布这部分需要注意的点我们这篇文章略过，大家感兴趣可以查看我关于包开发的讲解：Ant Design从无到有，带你体悟大厂前端开发范式 。

好啦，文稿内容到此结束，如果你还未过足瘾，没学会？没关系，公众号和B站已录制好这一章节对应视频，看完文章，嗑个瓜子视频回顾一下，人生啊，真香！

使用pm2启动verdaccio

1
pm2 start verdaccio

谢谢大家的阅读和鼓励，我是合一，英雄再会！