史上最貼心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 ，須要全局安裝，因此注意權限問題。

npm install -g verdaccio
複製代碼

安裝完之後，執行

verdaccio -h
複製代碼

出現版本號相關提示則表示安裝成功。若是提示命令找不到，請重啓控制檯。

運行 verdaccio

運行 verdaccio 命令很簡單，執行verdaccio便可。

verdaccio
複製代碼

這時，執行結果以下所示

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 默認配置以下

#
# 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 管理的參數中

uplinks:
	npmjs:
		url: https://registry.npmjs.org
	taobao:
		url: https://registry.npm.taobao.org/
複製代碼

packages

該參數是整個配置中最爲重要的一個，由於經過配置該參數，能達到設定包權限，設定包發佈與使用的權限，設置包是否代理到公有npm倉庫等

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 參數修改配置

listen:
	0.0.0.0: 3000
複製代碼

設置完重啓 verdaccio，端口便監聽在了3000

到這裏npm私有倉庫的配置啓動就完成了，接下來咱們就能夠開發包併發布了，但在這以前，推薦你們一個管理npm源的工具，nrm 。

優雅地方式設置npm源

安裝 nrm

使用 npm 安裝 nrm

npm i -g nrm
複製代碼

查看 nrm幫助

➜  ~ 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源

nrm ls
複製代碼

結果以下

➜  ~ 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官方源

nrm use npm
複製代碼

添加用戶自定義的源

添加命令很簡單，只須要指定源名和源地址便可

nrm add heyi 47.94.248.23:3000
複製代碼

再運行查看命令就能發現，列表中多了一條記錄，正是咱們添加的源

登陸npm

注意，登陸前必定要保證此時的npm源是指向咱們私有倉庫的，使用nrm便可完成切換

nrm use heyi
複製代碼

添加用戶

若是是第一次登陸，則須要註冊用戶，若是服務未作特殊權限的設置，直接添加用戶便可，命令以下

npm addUser
複製代碼

跟隨提示填寫用戶名、密碼、郵箱便可

發佈包

npm publish
複製代碼

由於不是npm發佈相關的極少，因此關於發佈這部分須要注意的點咱們這篇文章略過，你們感興趣能夠查看我關於包開發的講解：Ant Design從無到有，帶你體悟大廠前端開發範式 。

好啦，文稿內容到此結束，若是你還未過足癮，沒學會？不要緊，公衆號和B站已錄製好這一章節對應視頻，看完文章，嗑個瓜子視頻回顧一下，人生啊，真香！

使用pm2啓動verdaccio

pm2 start verdaccio
複製代碼

謝謝你們的閱讀和鼓勵，我是合一，英雄再會！