前端私有倉庫搭建

前言

隨着公司的業務愈來愈複雜，項目迭代速度也愈來愈快，那麼項目間的經常使用的業務代碼共享變得很是之有必要。可是對於公司的業務代碼是不能對外開放的，所以有必要搭建一個相似於http://npmjs.org這個的一個私有平臺來管理公司業務相關的組件及代碼。

更簡單的描述就是咱們須要在公司內部搭建一個npm倉庫，管理包的同時，也能夠藉助npm的命令行工具快速用代碼模塊或業務組件。

可是在沒有npm私有倉庫以前，咱們都是手動複製某個項目的某個模塊到相關的項目中，這樣操做比較繁瑣，所以咱們須要一個npm私有倉庫存放相關公用的組件及模塊。

關於做者

一個工做八年的草根程序員。

內容

• npm及私有npm的工做原理？
• 如何搭建一個私有的npm倉庫呢？
• cnpm搭建
• 經過verdaccio搭建

npm及私有npm的工做原理？

咱們使用npm安裝，共享和分發代碼，npm幫助咱們管理項目中的依賴關係，當咱們使用npm install去安裝一個模塊時，會先檢查node_modules目錄是否已經存在這個模塊，若是沒有便會向遠程倉庫查詢。

那如今若是咱們搭建了私有的npm，當咱們使用npm install後會向私有的npm發起請求，服務器會先查詢所請求的這個模塊是不是咱們本身的私有模塊或已經緩存過的公共模塊，若是是則直接返回給用戶，若是不是的話，那麼則會繼續向上查找(也就是開源的npm倉庫)去查找該模塊並返回給用戶。

如何搭建一個私有的npm倉庫呢？

搭建npm倉庫通常有以下基本方法：

1. 使用 Sinopia
2. 使用cnpmjs.org

1、cnpm搭建(我沒試過，你們能夠嘗試一下)

官方網站

• 安裝cnpm
• 啓動並配置服務
• 設置註冊地址
• 登陸cnpm
• 包上傳到私有倉庫
• 查看預覽包
• 安裝私有包

1.1 安裝cnpm

npm install -g --build-from-source cnpmjs.org cnpm sqlite3
# 若是報錯或者警告經過下面方式安裝
npm install -g --unsafe-perm --verbose --build-from-source cnpmjs.org cnpm sqlite3

複製代碼

若是安裝不流暢經過下面形式安裝：

npm install -g --build-from-source \
  --registry=https://registry.npm.taobao.org \
  --disturl=https://npm.taobao.org/mirrors/node \
  cnpmjs.org cnpm sqlite3

複製代碼

若是報警告或者安裝錯誤，請添加參數--unsafe-perm --verbose

1.2 啓動並配置服務

管理員：myname,othername 範圍：my-company-name,other-name 默認端口：7001-registry, 7002-web

啓動服務

$ nohup cnpmjs.org start --admins='myname,othername' \
  --scopes='@my-company-name,@other-name' &
複製代碼

1.3 設置註冊地址

將cnpm默認註冊地址更改成私有註冊地址

cnpm set registry http://localhost:7001
複製代碼

1.4 登陸cnpm

$ cnpm login
Username: myname
Password: ***
Email: (this IS public) test@test.com
複製代碼

1.5 包上傳到私有倉庫

新建項目

$ cd /tmp
$ mkdir helloworld && cd helloworld
$ cnpm init
name: (helloworld) @my-company-name/helloworld
version: (1.0.0)

{
  "name": "@my-company-name/helloworld",
  "version": "1.0.0",
  "description": "my first scoped package",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

複製代碼

上傳到私有倉庫

$ cnpm publish
+ @my-company-name/helloworld@1.0.0
複製代碼

1.6 查看預覽包

瀏覽器中預覽

open http://localhost:7002/@my-company-name/helloworld
複製代碼

使用cnpm預覽

cnpm info
複製代碼

1.7 安裝私有包

全部公共包均可直接使用cnpm安裝

cnpm install hotkeys-js
複製代碼

2、經過verdaccio搭建

verdaccio是一個輕量級的私有npm代理註冊。

• 安裝
• 啓動服務
• 添加用戶/登陸

2.1 安裝

# 使用 npm 安裝
npm install -g verdaccio

複製代碼

2.2 啓動服務

安裝完成後，咱們就能夠在命令行中 輸入verdaccio命令運行，以下所示：

而後在瀏覽器中 運行http://localhost:4873就能夠看到 以下圖所示：

說明服務啓動成功了；

固然還能夠經過pm2啓動，這裏不重複說明，有興趣能夠參考相關資料。

2.3 verdaccio的使用

在使用verdaccio以前，咱們能夠先安裝nrm來管理本身的npm代理，nrm能夠快速修改，切換，增長npm鏡像地址。

先安裝nrm，命令以下：

npm install -g nrm
複製代碼

想要了解更多有關的nrm命令，可使用 nrm --help, 會列出全部的命令行的。

• 添加別名
• 發佈私有包
• npm下載包

2.3.1 添加別名

我這邊爲了演示下，搭建的地址爲http://localhost:4873，大家本身能夠修改本身的服務器ip地址了；以下命令：

nrm add verdaccio http://localhost:4873
複製代碼

如今咱們可使用 nrm ls 命令查看 使用的全部鏡像源地址，verdaccio 就是咱們剛剛新增的，以下圖所示：

若是咱們如今不想從私有npm上下載包的話，咱們可使用 nrm use xx命令，use下地址。

npm adduser --registry  http://localhost:4873
複製代碼

2.3.2 發佈私有包

首先創建一個私有模塊

# 假設你創建了一個Git倉庫，先克隆下來
git clone git@km-git1.kemai.cn:xiaonengwu/hello.git

# 生成 `package.json` 配置, 注意限定 `@scope` 範圍
npm init --scope=xdd
# 提交到倉庫
git push origin master

複製代碼

若是咱們尚未帳號的話，經過輸入命令 npm adduser, 而後依次輸入用戶名，密碼便可建立完畢。若是已有帳號，經過輸入命令 npm login，而後依次輸入用戶名，密碼便可登陸。命令分別以下：

// 添加用戶
npm adduser 記得回車

// 登陸
npm login 

複製代碼

而後發佈咱們的代碼：咱們可使用 npm publish命令來發布包；以下所示：

npm publish --registry http://localhost:4873
複製代碼

發佈完成後，在刷新下 http://localhost:4873/#/ 就能夠看到咱們剛剛發佈的包了，如圖

2.3.3 npm下載包

最後咱們再驗證下，咱們新建一個文件夾爲 npmtest2，進入到該項目的根目錄下，使用命令 npm install @xdd/hello 下載咱們剛剛發佈到私有的npm包；

以下圖所示：

參考資料

• 使用verdaccio 搭建npm私有倉庫
• 在5分鐘內搭建企業內部私有npm倉庫

聯繫做者

平凡世界，貴在堅持。