搭建團(tuán)隊的私有倉庫，保證團(tuán)隊組件的安全維護(hù)和私密性，是進(jìn)階前端開發(fā)主管路上，必不可少的一項技能。

一、原理

我們平時使用npm publish進(jìn)行發(fā)布時，上傳的倉庫默認(rèn)地址是npm，通過Verdaccio工具在本地新建一個倉庫地址，再把本地的默認(rèn)上傳倉庫地址切換到本地倉庫地址即可。當(dāng)npm install時沒有找到本地的倉庫，則Verdaccio默認(rèn)配置中會從npm中央倉庫下載。

二、常用的倉庫地址

• npm : https://registry.npmjs.org/
• cnpm : http://r.cnpmjs.org/
• taobao: https://registry.npm.taobao.org/

三、優(yōu)勢

• 私密性高，僅團(tuán)隊共享。
• 安全性高，能夠有效的防治惡意代碼攻擊。
• 使用局域網(wǎng)，傳輸速度快。

四、準(zhǔn)備環(huán)境

• node（v12或更高）
• npm（pnpm或yarn）
• verdaccio（v5）
• nrm（快速切換倉庫源）
• pm2（守護(hù)進(jìn)程）

六、使用verdaccio搭建私有npm服務(wù)

1、安裝

npm install -g verdaccio

2、運(yùn)行

啟動時間會很久，斷開cmd會關(guān)掉服務(wù)，可以使用pm2守護(hù)進(jìn)程即可。
// 訪問http://localhost:4837

verdaccio

3、配置config.yaml，使局域網(wǎng)下能共享訪問，否則只能本機(jī)訪問。

C:\Users\admin\AppData\Roaming\verdaccio\config.yaml
// 最后面添加以下配置
listen: 0.0.0.0:4873
重啟，必須重啟電腦配置才能生效。

4、重新運(yùn)行

// 訪問http://ip:port/
// 不要訪問本地localhost下的

verdaccio

七、npm常見操作

查看當(dāng)前用戶信息

npm who am I

查看源地址

npm config list

切換源地址

npm set <registry> <url>

刪除源地址

npm config rm <registry>

創(chuàng)建用戶

npm adduser

登錄

npm login

發(fā)布

npm publish

八、項目使用

1、你可以通過以下命令來設(shè)置 registry。

npm set registry http://localhost:4873/

2、你可以在需要時帶上 --registry 參數(shù)。

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

3、在你的 .npmrc 中設(shè)置一個 registry 屬性。

.npmrc
registry=http://localhost:4873

4、在你的 package.json 中設(shè)置 publishConfig

{
  "publishConfig": {
    "registry": "http://localhost:4873"
  }
}

九、插件打包

1、 package.json 中新增一條編譯為庫的命令

"lib": "vue-cli-service build --target lib --name vue-verdaccio-zourongle --dest lib src/plugins/index.js"

–target : 構(gòu)建指標(biāo)，默認(rèn)為利用模式。這里批改為 lib 啟用庫模式。
–dest : 輸入目錄，默認(rèn) dist 。這里咱們改成 lib
[entry] : 最初一個參數(shù)為入口文件，默認(rèn)為 src/App.vue 。這里咱們指定編譯 src/plugins/index.js 組件庫目錄。
–name : 輸出名稱，這里咱們改成 自己的名稱

2、 執(zhí)行打包命令

npm run lib

3、打包成功

生成包文件夾lib

十、插件上傳

1、設(shè)置鏡像源

npm set registry http://localhost:4873/

2、 配置 package.json

在插件包文件夾里面創(chuàng)建package.json

{
    "name": "vue-verdaccio-zourongle",
    "version": "0.1.0",
    "description": "今天我發(fā)布一個插件",
    "main": "vue-verdaccio-zourongle.umd.min.js",
    "license": "MIT",
    "private": false
}

private : 必須設(shè)置為 fasle
main : 我的項目入口，默認(rèn)為同級目錄的 index.js
name : npm包名，就是咱們 import xxx from packagename 中的包名

3、登錄到 npm

在插件包的文件夾里面執(zhí)行

npm login

4、公布到 npm

npm publish

十一、上傳包到私庫報錯

1、錯誤信息

503 Service Unavailable - PUT http://localhost:4873/xxxx - one of the uplinks is down, refuse to publish

2、解決方案

在verdaccio啟動的配置文件config.yaml加上配置：

publish:
  allow_offline: true

3、重啟verdaccio后再publish

上傳成功了。文章來源地址http://www.zghlxwxcb.cn/news/detail-854757.html

到了這里，關(guān)于前端實戰(zhàn)：基于Verdaccio搭建私有npm倉庫，輕松上傳與下載自定義npm插件包的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！