[筆記] 建立自己的 npm, 以npm Orgs跟Verdaccio為例

7 min readFeb 16, 2019

由於最近公司的前端team想要建立自己的npm server, 讓工程師可以把自己寫的components 丟到npm server 上, 其他人可以直接用npm install 的方式直接安裝自己需要的components, 這樣的好處:

節省大家開發的時間, 人人為我, 我為人人的精神。
可以盡量讓各個元件的設計一致性。

目前我在網路上survey 有哪些可用的npm server:

npm官網有提供使用空間: npm account(免費), npm Orgs(免費), npm Enterprise(付費)。

npm account 只能將package 發佈到官方的npm server, 但沒有權限( permissions)跟群組(groups)的管理方式。詳細的比較

優點:

不需自行管理Server
有權限( permissions)跟群組(groups)機制

缺點:

Package 是公開的(public), 若要改成private需要使用另外付費($7/month)
無法自行刪除Orgs, 需通知npm 團隊

npm Orgs 版本可以使用private package, 但須付費($7/month)。

npm Enterprise 因為需要付費所有不考慮。

2. Third-party 套件: verdaccio, 可在local 端自己起一個npm server (環境: nodejs)

優點:

不需任何設定, 直接npm install verdaccio -g 後, 即可開啟npm server
Package 都是private 環境, 且不須付費, 若安裝package時在local server找不到則會去官方的npm server找
有groups跟permissions管理機制

缺點:

需要自行管理 npm server的維運, (如: pm2, k8s...)

依照上方的分析, 我們團隊是適合使用verdaccio, 畢竟還是在公司內部開發, 開發的東西還是不太能公開給大眾使用。不過我還是試過這兩種npm server, 以下在來介紹使用的過程

npm Orgs

官方文件: https://docs.npmjs.com/orgs/, 其實官方的說明也很詳細也很清楚, 有想要使用更進階的方式可以參考官方文件, 我目前只有使用最基本的功能。

首先還是要建立帳號

有了帳號之後, 就可以建立自己的org

命名自己的org

可以邀請其他團隊成員

完成後就按下Continue 就完成了

上傳第一個Package

首先到你想要上傳的元件資料夾, 並建立 package.json

npm init --scope=<your_org_name>

scope: 可以代表的是建立這個元件的團隊名稱

init完後可打開package.json, 會發現name 名字被改成<your_org_name>/<package_name>

再來要上傳元件之前, 要先本機端登入npm server

npm adduser --scope=<your_org_name>

如果已經建立過帳號, 就直接登入

npm login --scope=<your_org_name>

最後即可上傳

npm publish --access=public

--access=public: 代表是該元件是公開的元件, 因為我並沒有付費使用private, 若只輸入 npm publish, 則會出現以下error

npm ERR! You must sign up for private packages

上傳成功畫面

npm Orgs畫面

@leo_org 就是我設定的scope名稱, 1f是package 名稱

官方npm server 也找的到

刪除元件

npm unpublish --force

刪除成功畫面

元件已被刪除

Verdaccio

第三方的private npm registry套件, 可在本機端建立一個private npm registry, 所有上傳的元件只會儲存在本機端, 故適合用在公司內部使用或是其他獨立的環境使用

Github: https://github.com/verdaccio/verdaccio

官方介紹: A lightweight private npm proxy registry

使用的方法也很簡單

先安裝CLI

npm install --global verdaccio

啟動server

verdaccio

預設url: http://localhost:4873/#/

上傳元件的步驟其實跟npm Orgs一樣

首先一樣可以設定npm init

npm init --scope=<scope_name>

這裡如果不設定scope, 則上傳元件時, package名稱就是單純的元件名稱

再來註冊/登入server

註冊

npm adduser --registry http://localhost:4873

登入

npm login --registry http://localhost:4873 --scope=@leo_org

上傳元件

npm publish --registry http://localhost:4873

成功畫面

多了一個@leo_org/1f

刪除元件

npm unpublish --force --registry http://localhost:4873註: 感謝保哥提醒, 這邊需要記得加上--registry 去指定 verdaccio 伺服器 確保是刪除http://localhost:4873上的元件。 如果沒有--registry 預設是 https://registry.npmjs.org如果不想每次下指令都要加上 --registry http://localhost:4873, 可以設定成全域變數
=>  npm set registry http://localhost:4873/

刪除成功