本篇要解決的問題
最近工作上刻了一套 UI,又寫了幾個可以共用的 JS 檔,問題點在於,有多個專案要用這套 UI,這些 JS 檔也可以直接搬去其他專案上使用。為了讓其他前端方便共用,也為了避免更新一個專案上的 JS 後,還得手動複製貼上到其他專案,就決定找一個可以在本機安裝 npm 的方式,問了 ChatGPT,就得到 Verdaccio 這個答案。
用 Docker 安裝 Verdaccio 的方式很簡單,下幾個命令就可以安裝完成,本篇會簡單記錄這二天使用 Verdaccio 時的一些筆記。
用 Docker 安裝 Verdaccio
安裝 Docker Desktop
首先,請先安裝 Docker Desktop。
新增「verdaccio」、「config.yml」
先新增一個資料夾「verdaccio」。
建立一個檔案「config.yml」,因為本篇的目標是同一個區網下的前端大大們能共同使用,所以要先知道自己的本機 IP。
比方 August 的本機 IP 是:192.168.1.154。
那 config.yml 裡面只需要寫上一行:
listen: 192.168.1.154
這樣等等安裝好 Verdaccio 後,就不會是 localhost 而是 192.168.1.154。
安裝 Verdaccio
開啟終端機進入 verdaccio 這個資料夾,輸入:
docker run -it -d --name verdaccio -p 7726:4873 verdaccio/verdaccio
7726
這個 Port 是拿來當範例用的,大家可以換成自己要的 Port。
按下 Enter 後,大概 1 秒的時間,Container 就建立完成:
打開網址,就會看到 Verdaccio 的首頁:
在首頁上可以看到,建立使用者的命令是:
npm adduser --registry http://192.168.1.154:7726/
終端機輸入並按下 Enter,接著依序要輸入帳號、密碼、信箱,輸入完使用者便建立完成,可以點擊右上角的「LOGIN」進行登入。
以上,Verdaccio 便安裝完成,如果其他前端大大點了網址卻進不去,請記得把防火牆打開。
上傳 package
接著來示範如何上傳 package 到 Verdaccio 上。
比方我們要共用的是 say-hello 這個 package。
建立一個「say-hello」的資料夾。
終端機進入資料夾後,輸入:
npm init -y
或
yarn init -y
接著會看到新增了一個 package.json 的檔案,內容為:
{
"name": "say-hello",
"version": "1.0.0",
"main": "index.js",
"license": "MIT"
}
main
的主要 JS 檔可以修改,比方我們如果使用的 JS 檔叫 sayHello.js,那就可以把 index.js 換成 sayHello.js。
這邊 August 就建一個 sayHello.js 的檔案,內容就一個簡單的 console.log:
export const sayHello = ({ name }) => {
return console.log(`Hello ${name}`);
}
最後我們要把這個資料夾發佈到 Verdaccio 上,終端機輸入:
npm publish --registry http://192.168.1.154:7726
再按下 Enter,發佈成功會看到以下訊息:
網頁進到我們的 Verdaccio 頁面,就會看見 package 了:
更新 package
之後如果 sayHello.js 有更新,發佈上 Verdaccio 的命令是一樣的,但是要記得,package.json 裡的 version
要更新,不然 Verdaccio 會不給上傳。
使用 package
假設今天其他前端大大要安裝 say-hello 這個 package,安裝的命令後面要加上我們的本機 IP:
npm install -D say-hello --registry http://192.168.1.154:7726
或
yarn add -D say-hello --registry http://192.168.1.154:7726
安裝完後,一樣是會收在 node_modules 的資料夾中,我們簡單的 import 進來就可以使用:
import { sayHello } from "say-hello";
sayHello({ name: 'August' });
.npmrc
如果只想要跟一般安裝 npm package 一樣,不想每次後面都多輸入「--registry http://192.168.1.154:7726」這一串,方法很簡單。
在要使用 Verdacco 的專案根目錄下,新增一個檔案「.npmrc」,裡面寫上一行:
registry=http://192.168.1.154:7726
這樣預設我們使用 npm install 或 yarn add 時,會先從我們的本機 IP 去找,找不到會再去 npm 官方資源上找。
刪除 package
要刪除 package,August 的方式是……直接從 Docker Desktop 的介面上,點進 Container 去刪,像這樣:
進到 Container 後,點擊「Files」看原始檔,路徑是:
verdaccio/storage/data/package名稱
對著 package 的資料夾點右鍵,就會出現「Delete」的選項,點擊後就刪除了。
修改 config.yml
config.yml 可以修改的東西很多,詳情可見官方文件:Configuration File。
這邊示範怎麼修改頁面的 title、logo、favicon。
一樣,直接從 Docker Desktop 的介面上,點進 Container 去改,像這樣:
資料夾路徑是「verdaccio/conf/config.yaml」,對檔案點右鍵,會出現「Edit file」,點擊後就可以編輯檔案,等我們改完,儲存後,再按下右上角 Restart 的按鈕,重新整理頁面就可以看到。
config.yaml 的檔案,找到 web 開頭的那行:
config.yaml 上所有可設定的東西,註解上都有說明了,這邊示範修改 title 跟加上 logo、favicon:
web:
title: Lets Write npm
logo: logo絕對路徑
favicon: favicon絕對路徑
存檔後再按下 Restart,回到 Verdaccio 的頁面,就會看到改變了:
改變 CSS
因為實際使用時,通常會寫 README.md 檔案來說明,可是 August 看到有程式碼的部份是這樣:
一整個就是暗迷摸的程式碼,不說以為是在辨識工程師是不是色盲。
研究了一下怎麼改變 CSS,問了 ChatGPT、Bard 後,好像很麻煩,畢竟也只想改變一個變數而已,為了這一行而花時間裝 Plugin 很費工,就決定用最簡單的方式……改 config.yaml。
一樣到我們上一步進到的 config.yaml 檔,找了一下,可以接受 <style>
標籤的,是 scriptsBodyAfter
這個地方,因此寫上:
scriptsBodyAfter:
- '<style>@media (prefers-color-scheme: dark) { .markdown-body { --color-canvas-subtle: #f1f1f1; } }</style>'
存檔後按下 Restart,一切又重見光明了:
Top comments (0)