介紹
在上一篇(如何發(fā)布代碼到npm官方倉庫)文章中师郑，我們介紹了如何將自己的代碼發(fā)布到npm官方倉庫颊乘，通過那種方式，我們可以將自己寫的任何組件開源給別人用媒役，和我們?nèi)粘Ｔ?code>github上使用的三方庫是一個道理仪际。我們也說過围小，我們發(fā)布的組件或包都是開源的，任何人都可以訪問并且可以在npm官方倉庫搜索到的树碱，雖然npm官方提供的收費版也可以發(fā)布私有倉庫肯适，特別方便，但是成榜，太TM貴了框舔！所以，今天我們來繼續(xù)介紹另一種不使用npm官方提供的收費版私有倉庫的方式赎婚，來搭建屬于我們自己的僅僅公司內(nèi)部可使用的npm私有倉庫 -- verdaccio & ngrok刘绣。
verdaccio
一個輕量級的私有npm代理注冊表，你可以將verdaccio理解為一個私有npm倉庫服務(wù)器挣输，因為使用verdaccio纬凤，你可以將npm包發(fā)布到你的本地倉庫，此時你自己的電腦就是一臺npm私有倉庫服務(wù)器撩嚼，你可以在你的電腦發(fā)布npm包停士，并且通過npm install來安裝使用。
ngrok
ngrok就是一個方向代理绢馍，這里的主要作用是實現(xiàn)內(nèi)網(wǎng)穿透向瓷，因為使用verdaccio搭建本地私有npm倉庫服務(wù)器后肠套，你的電腦就是作為服務(wù)器使用舰涌，你可以在你的電腦上下載（npm install）、使用你發(fā)布的私有npm倉庫你稚，但是另一臺電腦或服務(wù)器上是不能訪問的瓷耙，也就是除了你，其他任何人都沒法使用你發(fā)布的npm私有倉庫刁赖，如果你想要別人也能夠使用你發(fā)布的npm私有倉庫的話搁痛，你必須將類似由verdaccio服務(wù)生成的類似http://localhost:4873的url暴露給他人，通過ngrok你可以將你自己電腦上的本地url映射到大千世界宇弛，以至于別人能夠通過映射的新url訪問你的npm私有倉庫鸡典。
搭建npm私有本地倉庫
安裝
首先要全局安裝verdaccio，使用如下命令
npm install --global verdaccio
也可以使用簡寫
npm install -g verdaccio枪芒，兩者并沒區(qū)別彻况。
安裝成功后谁尸，接著啟動verdaccio
verdaccio
啟動之后，你應(yīng)該就能看到
圖中的http://localhost:4873就是啟動后的本地服務(wù)的url纽甘，在瀏覽器中打開它良蛮，你應(yīng)該能夠看到
內(nèi)容如下
No Package Published Yet.
To publish your first package just:
1. Login
npm adduser --registry http://localhost:4873
2. Publish
npm publish --registry http://localhost:4873
3. Refresh this page.
注意：雖然這里登陸&發(fā)布都在后綴添加了
--registry http://localhost:4873，也就是為了指定發(fā)布在本地服務(wù)http://localhost:4873上悍赢，這樣也是為了誤操作發(fā)布到官方npm倉庫决瞳。但是為了后面不添加后綴就可以和正常的npm操作一樣，不用添加任何后綴左权，我們會直接更新npm默認(rèn)源皮胡，見下面??更新默認(rèn)npm源。
更新默認(rèn)npm源
設(shè)置http://localhost:4873為npm默認(rèn)源
npm config set registry http://localhost:4873
為什么要設(shè)置http://localhost:4873為npm默認(rèn)源赏迟？
首先要清楚的是胸囱，我們電腦上npm的鏡像源是官方的http://registry.npmjs.org/，因此當(dāng)我們使用npm publish或者npm install的時候瀑梗，都是發(fā)布或安裝到npm官方倉庫烹笔，如果這樣的話，使用verdaccio還有什么意義抛丽？我們還怎么發(fā)布私有庫谤职？所以我們要本地發(fā)布、安裝npm私有倉庫亿鲜，就必須要使用verdaccio的鏡像源允蜈，也就是剛才的本地url -- http://localhost:4873，我們可以使用下面的命令查看當(dāng)前的鏡像源
npm config get registry
更新默認(rèn)npm鏡像源后蒿柳，你應(yīng)該看到能夠看到輸出的鏡像源是
? ~ npm config get registry
http://localhost:4873/
創(chuàng)建私有npm用戶
npm adduser
注意：這里使用
npm adduser（你也可以使用npm login）之后會要求你輸入用戶名饶套、密碼、郵箱三個信息垒探，然后會創(chuàng)建一個npm本地賬戶妓蛮，為什么說是npm本地賬戶？因為這個賬號的鏡像源是http://localhost:4873而不是官方的http://registry.npmjs.org/圾叼，因此如果你使用這個npm本地賬戶到官方網(wǎng)站登錄的話蛤克，你會發(fā)現(xiàn)你無法登錄，換句話說夷蚊，這個賬號屬于本地所有构挤，不被官方npm所承認(rèn)，兩者是不同的npm賬號惕鼓。
創(chuàng)建本地私有npm包
創(chuàng)建npm包和我們官方的npm創(chuàng)建發(fā)布到npm官方倉庫的命令基本一樣筋现，如果你還不熟悉發(fā)布公有倉庫到npm官方倉庫，建議還是先看一下如何發(fā)布代碼到npm官方倉庫
初始化
在你想要創(chuàng)建npm私有倉庫的文件夾目錄下，我的是/Users/langke/TestReactNative/verdaccio-dir矾飞，執(zhí)行
npm init
填寫相應(yīng)信息彻犁，我的輸出如下
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
and exactly what they do.
Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
package name: (verdaccio-dir) first-verdaccio-npm-demo
version: (1.0.0)
description: This is the first private npm demo for verdaccio.
entry point: (index.js)
test command:
git repository:
keywords: verdaccio-npm-demo
author: langke
license: (ISC)
About to write to /Users/langke/TestReactNative/verdaccio-dir/package.json:
{
"name": "first-verdaccio-npm-demo",
"version": "1.0.0",
"description": "This is the first private npm demo for verdaccio.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"verdaccio-npm-demo"
],
"author": "langke",
"license": "ISC"
}
Is this OK? (yes) yes
創(chuàng)建一個index.js和README.md文件，并添加內(nèi)容（這一步非必須凰慈，我這里只是掩飾）
? verdaccio-dir vi index.js
? verdaccio-dir ls
index.js package.json
? verdaccio-dir vi README.md
? verdaccio-dir cat README.md
# Getting started
Hello, world!
package.json文件內(nèi)容如下：
{
"name": "first-verdaccio-npm-demo",
"version": "1.0.0",
"description": "This is the first private npm demo for verdaccio.",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [
"verdaccio-npm-demo"
],
"author": "langke",
"license": "ISC"
}
發(fā)布本地npm包
再次提醒汞幢，這里發(fā)布的npm包只在自己的電腦上，也就是本地的http://localhost:4873（這是我們剛才用來替換npm官方的registry源）微谓，發(fā)布的是一個在本地私有服務(wù)器上的一個私有npm包森篷。此時，只有自己能夠查看豺型、下載仲智、安裝，別人沒有任何權(quán)限的姻氨。
發(fā)布命令和正常npm命令一樣
npm publish
輸出類似如下
npm notice
npm notice ?? first-verdaccio-npm-demo@1.0.0
npm notice === Tarball Contents ===
npm notice 91B index.js
npm notice 321B package.json
npm notice 33B README.md
npm notice === Tarball Details ===
npm notice name: first-verdaccio-npm-demo
npm notice version: 1.0.0
npm notice package size: 455 B
npm notice unpacked size: 445 B
npm notice shasum: df639fd12218accfa1949cb933e496ddea020078
npm notice integrity: sha512-N4TmHO2xcNSL9[...]SINM/KD+TR5EA==
npm notice total files: 3
npm notice
+ first-verdaccio-npm-demo@1.0.0
到這里钓辆，說明本地的npm私有庫發(fā)布成功！
在剛才打開http://localhost:4873的頁面上肴焊，刷新頁面前联，可以看到
看到了沒，這個first-verdaccio-npm-demo就是我們剛剛發(fā)布的npm私有庫娶眷，現(xiàn)在自己就可以像正常使用npm官方的命令那樣安裝到本地依賴使用了似嗤。
使用
找到你的項目（最好是測試項目），安裝試試(我使用的是yarn届宠，你也可以使用npm)
yarn add first-verdaccio-npm-demo
然后出現(xiàn)類似下面輸出
yarn add v1.17.3
[1/4] ?? Resolving packages...
[2/4] ?? Fetching packages...
[3/4] ?? Linking dependencies...
warning "@react-native-community/eslint-config > @typescript-eslint/eslint-plugin@1.13.0" has incorrect peer dependency "eslint@^5.0.0".
warning "@react-native-community/eslint-config > @typescript-eslint/parser@1.13.0" has incorrect peer dependency "eslint@^5.0.0".
warning "@react-native-community/eslint-config > eslint-plugin-react@7.12.4" has incorrect peer dependency "eslint@^3.0.0 || ^4.0.0 || ^5.0.0".
warning "@react-native-community/eslint-config > eslint-plugin-react-native@3.6.0" has incorrect peer dependency "eslint@^3.17.0 || ^4 || ^5".
warning "@react-native-community/eslint-config > @typescript-eslint/eslint-plugin > tsutils@3.17.1" has unmet peer dependency "typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta".
[4/4] ?? Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ first-verdaccio-npm-demo@1.0.0
info All dependencies
└─ first-verdaccio-npm-demo@1.0.0
? Done in 2.73s.
太棒了烁落，在package.json中的dependencies依賴中終于成功安裝我們的npm私有庫first-verdaccio-npm-demo了，繼續(xù)看下node_modules中
現(xiàn)在，盡情地在你的項目中使用這個組件吧
import {putMsg} from 'first-verdaccio-npm-demo';
putMsg(); // Great, you got a private npm repository!
但是，這樣還不夠白罱！只有我自己可以使用每聪，那別人（比如公司內(nèi)部的團隊成員）要怎么才能安裝我的這個私有庫呢？是時候祭出我們的尚方寶劍ngrok了属桦。
使用ngrok讓本地npm私有庫公有化
安裝ngrok
npm i ngrok -g
暴露4873端口
ngrok http 4873
輸出類似如下
在上圖中我們可以看到http://8f76570f.ngrok.io -> http://localhost:4873（當(dāng)然還有https）熊痴，其中http://8f76570f.ngrok.io就是我們通過ngrok反向代理將本地http://localhost:4873公開給外部環(huán)境他爸，這樣聂宾，別人也可以訪問你剛才發(fā)布的npm私有庫first-verdaccio-npm-demo。你可以在另一臺電腦上訪問http://8f76570f.ngrok.io诊笤，它和我們剛才在自己電腦上訪問http://localhost:4873是一樣的系谐，并且能夠看到剛剛發(fā)布的私有庫。
使用私有庫
現(xiàn)在，別人能夠訪問我們剛才發(fā)布的私有庫了纪他，但是鄙煤，要想使用剛才發(fā)布的私有庫還需要在相應(yīng)電腦上設(shè)置npm鏡像源為http://8f76570f.ngrok.io，因為默認(rèn)的是官方的http://registry.npmjs.org/茶袒，這很好理解梯刚。
在要訪問當(dāng)前電腦上的npm私有庫，在另一臺電腦上更新npm鏡像源
npm config set registry http://8f76570f.ngrok.io
然后安裝
npm install first-verdaccio-npm-demo
這樣薪寓，就能夠?qū)崿F(xiàn)除了在本電腦的服務(wù)上使用npm私有庫外亡资，團隊成員也能夠使用相應(yīng)私有庫了。
優(yōu)缺點
雖然使用 verdaccio + ngrok 來部署npm私有庫向叉，但是也有一些缺點锥腻。
優(yōu)點
- 實現(xiàn)npm私有庫發(fā)布，不對外公開（除非你把代理源比如
http://8f76570f.ngrok.io給外部人員）母谎，也可以在~/.config/verdaccio/config.yaml添加訪問權(quán)限瘦黑，默認(rèn)access: $all，這樣最保險（verdaccio的具體配置奇唤，自己去官方網(wǎng)站看即可）
這里還是順便提一下access字段幸斥，如果你設(shè)置為access: $authenticated，意味著你在網(wǎng)頁打開也必須要登錄才能查看咬扇、安裝（也就是我們上面說的npm adduser創(chuàng)建的賬戶）睡毒，如果你已經(jīng)在terminal上登錄，并且在執(zhí)行npm install的時候還是報錯類似如下：
yarn add v1.17.3
[1/4] ?? Resolving packages...
error An unexpected error occurred: "http://localhost:4873/first-verdaccio-npm-demo:
authorization required to access package first-verdaccio-npm-demo".
info If you think this is a bug, please open a bug report with the information
provided in "/Users/langke/TestReactNative/fuckmap/yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
那么請執(zhí)行：
npm config set always-auth=true
這樣的話冗栗，你只要登錄你的賬號（無論是瀏覽器還是終端）演顾，就能查看/下載了。重要的是隅居，如果你用npm adduser（或npm login）創(chuàng)建了多個賬號钠至，比如test1/test123、test2/test234胎源，那么在授權(quán)的時候棉钧，你可以登錄其中任意一個的賬號都可以訪問和下載（因為你注冊的多個賬號都在你本機的verdaccio服務(wù)上）。
可以使用和官方
npm一樣的命令涕蚤，比如npm version patch操作宪卿、配置簡單，基本無難度
verdaccio本身自帶小型數(shù)據(jù)庫万栅，可緩存已經(jīng)
npm install過的私有庫（如果網(wǎng)絡(luò)不好或獲取不到本臺電腦上的私有庫的話佑钾，會從緩存中獲取）
缺點
可能會經(jīng)常要切換
npm代理源烦粒，因為有時候你可能會使用官方倉庫休溶，就得切換官方或其他代理源代赁，再用私有庫的時候又得切換回來（團隊成員要安裝已更新的npm包一樣要設(shè)置）verdaccio服務(wù)和ngrok服務(wù)要保持開著，一旦斷開兽掰，任何人（包括本機）都無法安裝和發(fā)布芭碍，只能重新啟動verdaccio和ngrok服務(wù)，對方如果想要更新最新發(fā)布的私有庫版本孽尽，也要重新設(shè)置ngrok產(chǎn)生的類似http://8f76570f.ngrok.io的鏡像源（本機如果設(shè)置npm config set registry http://localhost:4873就不用窖壕，因為http://localhost:4873是不變的，變的只是映射出去的http://8f76570f.ngrok.io）ngrok服務(wù)器在國外杉女，有時會比較慢
ngrok代理的鏡像源比如
http://8f76570f.ngrok.io沒有固定url艇拍，每一次執(zhí)行ngrok http 4873，都會改變宠纯。因此如果在新電腦或者其他人設(shè)置過http://8f76570f.ngrok.io作為鏡像源卸夕，在本機上再次執(zhí)行ngrok http 4873后，對方也要跟著重新設(shè)置類似的npm config set registry http://8f76570f.ngrok.io操作婆瓜，這顯然很麻煩（因為使用的是免費版快集，收費版可以代理固定的url，但如果那樣的話廉白，那為何不使用npm官方提供的收費版呢个初？）http://8f76570f.ngrok.io在每分鐘內(nèi)訪問有限制，訪問太快猴蹂，瀏覽器會報如下錯誤(恢復(fù)也較快院溺，30秒左右，可自己嘗試)：
Too Many Connections
Too many connections! The tunnel session '1VF8JMx9QsgS6GcWS9gPBZyQQO4' has violated
the rate-limit policy of 20 connections per minute by initiating 37 connections in
the last 60 seconds. Please decrease your inbound connection volume or upgrade to
a paid plan for additional capacity.
The error encountered was: ERR_NGROK_702
總結(jié)
使用verdaccio + ngrok配置起來比較方便磅轻，也能迎合npm的相關(guān)命令珍逸，安裝和操作都特別簡單，verdaccio也提供本地緩存聋溜，這個很棒谆膳。但是速度這一塊以及ngrok產(chǎn)生的代理源不固定，團隊協(xié)作安裝較為麻煩撮躁，這個有時候真的不能忍受（可以看上面的優(yōu)缺點）漱病。但是，如果能接受的話把曼，這也不失為一個選擇杨帽。如果你有比ngrok更好用的反代理或者其他工具，請告訴我嗤军。下一章我會介紹如何通過npm + github的方式來創(chuàng)建npm私有倉庫注盈。
參考文章：Testing your npm package before releasing it using Verdaccio + ngrok
