本篇要解決的問題
最近工作上刻了一套 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)