前言
接著上篇文章Gitea+Jenkins能碰撞出怎樣的火花？淺談前端自動化部署_DieHunter1024的博客-CSDN博客
本文將與大家分享使用verdaccio搭建私有化npm倉庫以及npm包的發布
準備作業
- Node環境
- 遠程或本地服務器
- verdaccio
安裝配置verdaccio
- 使用npm install --global verdaccio全域安裝verdaccio
- 在服務器中新建檔案夾用來存放npm資料
- 在新建的檔案夾中運行cmd輸入verdaccio，顯示以下日志就可以了
- 在瀏覽器打開http://localhost:4873/顯示以下頁面就可以進行下一步了
- 通過日志可以知道verdaccio的yaml檔案在 C:\Users\用戶名\.config\verdaccio\config.yaml，我們可以自定義該檔案并且手動啟動，將yaml檔案復制到新建的檔案夾下并修改檔案，以下是我的組態檔，僅供參考
# 資料快取目錄 storage: ./storage # 插件目錄 plugins: ./plugins #開啟web 服務,能夠通過web 訪問 web: # 頁面title名稱 #enable: false title: NPM-diehunter #驗證資訊 auth: htpasswd: # 用戶資訊存盤目錄 file: ./htpasswd # 最大注冊人數，默認infinity #max_users: 1000 #公有倉庫配置 uplinks: npmjs: # url: https://registry.npmjs.org/ # taobao鏡像 url: https://registry.npmmirror.com/ packages: "@*/*": # scoped packages access: $all publish: $authenticated #代理 如果本地倉庫沒找到會去npmjs中找，npmjs就是uplinks中的變數 proxy: npmjs "**": # 權限：所有人,匿名用戶,認證(登陸)用戶 # "$all", "$anonymous", "$authenticated" #是否可訪問所需要的權限 access: $all #發布package 的權限 publish: $authenticated # 如果package 不存在,就向代理的上游服務發起請求 proxy: npmjs middlewares: audit: enabled: true # 監聽本地所有ip，配置了后可以通過公網訪問 listen: 0.0.0.0:10241 # 日志 logs: - { type: stdout, format: pretty, level: http } #- {type: file, path: verdaccio.log, level: info} - 使用cmd腳本啟動檔案，可以將以下命令寫成bat檔案并放在檔案夾目錄
verdaccio --listen 10241 --config ./config.yaml - 最后運行命令，打開網頁
- 此外，可以參考Nginx常用指令，基本配置，反向代理_DieHunter1024的博客-CSDN博客，把npm倉庫反向代理到路由，不占用埠
上傳代碼至倉庫
推薦使用nrm管理npm倉庫地址，切換倉庫地址為http://localhost:10241/
以之前寫的PubSubPattern（發布訂閱）為例子，在檔案夾中 npm init -y 新建package.json檔案，并配置name，version等
{
"name": "pub_sub_pattern",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
注冊用戶：使用npm adduser --registry http://localhost:10241/注冊用戶，輸入用戶名（小寫），密碼，郵箱
然后在index.js中寫入原始碼
exports.PubSubPattern = class PubSubPattern {
constructor() {
this._eventList = {}; //調度中心串列
}
static Instance() {
//回傳當前類的實體的單例
!PubSubPattern._instance &&
Object.defineProperty(PubSubPattern, "_instance", {
value: new PubSubPattern(),
});
return PubSubPattern._instance;
}
on(type, handler) {
if (!checkArgs(type, handler)) {
return;
}
//若調度中心未找到該事件的佇列，則新建某個事件串列（可以對某個型別的事件注冊多個回呼函式）
!isKeyInObj(this._eventList, type) && (this._eventList[type] = new Array());
this._eventList[type].push(handler);
}
un(type, handler) {
if (!type) {
return;
}
const fnList = this._eventList[type];
if (type && (!handler || typeof handler !== "function")) {
this._eventList[type] = null;
return;
}
for (let i = 0; i < fnList.length; i++) {
fnList[i] && fnList[i] === handler && (this._eventList[type][i] = null);
}
}
once(type, handler) {
if (!checkArgs(type, handler)) {
return;
}
const _handler = (args) => {
this.un(type, _handler);
handler(args);
};
this.on(type, _handler);
}
emit(type, module) {
if (!type) {
return;
}
const fnList = this._eventList[type];
if (!fnList) {
return;
}
isKeyInObj(this._eventList, type) && fnList.map((_) => _ && _(module));
}
clear() {
this._eventList = {};
}
}
/**
* 檢查物件是否包含該屬性，除原型鏈
* @param obj 被檢查物件
* @param key 被檢查物件的屬性
*/
function isKeyInObj(obj, key) {
return Object.hasOwnProperty.call(obj, key);
}
/**
* 檢查引數是否符合標準
* @param type 事件名
* @param handler 事件鉤子
*/
function checkArgs(type, handler) {
if (!type) {
return;
}
if (!handler || typeof handler !== "function") {
throw new Error(
"handler is not defined or not a function at arguements[1]"
);
}
return true;
}
完成后輸入npm publish --registry http://localhost:10241/將代碼發布到npm倉庫
npm包的發布就完成了
安裝依賴
另起一個test檔案夾，使用
npm init -y
npm i pub_sub_pattern
下載依賴
在test檔案夾中新建main.js輸入以下內容
const { PubSubPattern } = require("pub_sub_pattern");
console.log(PubSubPattern);
PubSubPattern.Instance().on("event", (data) => {
console.log(data);
});
setTimeout(() => {
PubSubPattern.Instance().emit("event", { name: "hunter" });
}, 1000);
并且在控制臺執行node main，出現以下日志就表示成功了
寫在最后
最后，我們可以配合這篇文章Gitea+Jenkins能碰撞出怎樣的火花？淺談前端自動化部署_DieHunter1024的博客-CSDN博客
將npm publish --registry http://localhost:10241/命令放在Jenkins的命令中實作自動發布npm，這便是微前端的雛形
感謝你看到了這里，如果這篇文章對你有幫助，請點個贊支持一下作者！你的支持是作者創作的動力~
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/382992.html
標籤：其他
上一篇：Linux 命令列基礎