跳到主要內容

[鐵人賽] NPM 介紹及使用說明 - node.js day 4

NPM 介紹

導讀

npm 在 Node.js v0.6.x 版本之後,就變成內建的系統之一,npm 全名為 node.js package management,主要用於套件管理, 至於 npm 有什麼強大之處,接下來慢慢介紹。

開始

Node.js 其中好用的一個部份就是因為有 npm,擁有完整管理的架構,讓套件可以被妥善管理,每個專案間的 dependecy 也可以妥當的被使用,目前在 npm 上也已經有 8000 多個模組,提供開發者使用。
基於開發者不要重複自己造輪子,從 npm 上面找到適合自己的模組,就是開發者應該做的工作。

npm 基本使用方法

npm 資料網站
https://npmjs.org/
可以從上面的網站找到許多套件,使用方法也非常簡單
內容詳細的項目,可以參考 npm 的說明,在終端機輸入 npm ,會得到如下的訊息,
where  is one of:
    add-user, adduser, apihelp, author, bin, bugs, c, cache,
    completion, config, ddp, dedupe, deprecate, docs, edit,
    explore, faq, find, find-dupes, get, help, help-search,
    home, i, info, init, install, la, link, list, ll, ln, login,
    ls, outdated, owner, pack, prefix, prune, publish, r, rb,
    rebuild, remove, restart, rm, root, run-script, s, se,
    search, set, show, shrinkwrap, star, start, stop, submodule,
    tag, test, tst, un, uninstall, unlink, unpublish, unstar,
    up, update, version, view, whoami

npm  -h     quick help on 
npm -l           display full usage info
npm faq          commonly asked questions
npm help   search for help on 
npm help npm     involved overview

Specify configs in the ini-formatted file:
    /Users/caesar/.npmrc
or on the command line via: npm  --key value
Config info can be viewed via: npm help config

如果想要知道每個項目要怎麼使用,可以輸入如下的範例
npm remove -h
npm tag -h
輸入上面的指令,加上 -h 的參數之後,就可以得到解釋。

npm install

用於安裝 node module,描述如下,
npm install express
如此就可以安裝 express 的套件。
全域的安裝,指的是當此套件擁有指令模式的時候,可以使用 npm install -g ,讓模組的指令可以直接在系統上執行。
npm install -g express
安裝完成之後就可以使用在系統上使用 express 這個指令。
express test 
就可以使用 Express 指令產生新的專案 。
另外如果希望安裝 express 舊有版本的時候,可以直接使用
npm install express@2.8.5
輸入上面的指令 express 2.8.5 就會被安裝完成。
如果是為於某個專案底下,同時 node project 中也有設定 package.json 的話,就可以直接使用,
npm install .
如此就會去讀取 package.json 當中的 dependencies ,找到需要安裝的模組,安裝到此目錄的 node_modules 目錄當中。

npm list

列出目前安裝的 node module 有哪些,
// 列出目前 node moulde 
npm list
輸入如上的指令,如果沒有位於任何 node project 底下的時候,是不會顯示任何模組,這是因為 npm 會去讀取 package.json,取得相依的 package 之後,再到此目錄底下的 node_modules 底下找相關模組是否已經被安裝。
// 列出全域安裝的 node module
npm list -g     
如果輸入上面的指令,就會得到目前使用 npm 已經安裝多少全域的模組,將會全部被列出來。

後記

npm 另外一個強大的部份在於 npmjs.org 網站上面的註冊、管理、上傳設定,讓自己開發的 node modules 也可以透過 npm 進行安裝,但是在這個章節,不會教導這麼多,這個部份,歡迎有興趣的人自己去找尋答案,或者到 Node.js Taiwan 社群討論。
安裝完 node.js 也了解 npm 之後,接著可以開始進行我們的第一個 node 程式,進行自己的 node.js 開發第一步。

留言

這個網誌中的熱門文章

Vibe Coding:到底?氛圍驅動程式開發必殺技?

Vibe Coding(氛圍編程) 是由 OpenAI 共同創辦人 Andrej Karpathy 在 2025 年提出的革命性程式開發方式,它讓開發者透過自然語言與 AI 對話來生成程式碼,徹底改變了傳統的編程模式。 這種開發方式的核心理念是 「順著感覺走」 ,讓 AI 處理技術細節,開發者專注於創意和需求描述。 Vibe Coding 需要基本上的規劃和執行,但並沒有強制規範,從日常經驗來說可分為三個階段, 前期準備、開發過程、和後期維護 三個關鍵階段。每個階段都有其特定的任務和注意事項,正確執行這些步驟將大幅提升開發效率和程式品質。 將靈感與需求透過 AI 快速轉化成產品功能或原型。以下幫你分成 「前、中、後」 三階段要做的事情,適合你自己做、或帶團隊做 前期:設定 vibe & 準備素材 這個階段的重點是 「建立開發語境」 ,因為 AI 的生成表現高度依賴前期提供的上下文與資料。 明確目標 :釐清要解決的問題、預期要做的功能與核心價值。例如在筆記軟體的情境中,可能是:「我要做一款讓使用者能用 Markdown 記錄筆記,並提供標籤與全文搜尋功能的簡單 App。」 收集靈感 :觀察同類產品(如 Obsidian、Notion)、蒐集市場痛點(例如太多筆記軟體無法脫機使用,或同步效能差)。 建立語境 :準備初步 prompt、背景知識、產品定位、品牌調性、目標使用者輪廓等。 確認資源 :決定用哪些工具(Gemini、ChatGPT、設計軟體、流程管理工具等)。 確認完上述內容之後,就可以先開始進行準備規格,進行第一次的 Vibe Coding 方向驗證 提示詞模板準備 很多人會跳過這步驟,但一份 「好的 AI 提示詞模板」 將決定接下來每一次 AI 對話的品質。有效的提示詞模板需具備: 描述具體且無歧義 包含技術要求和約束條件 提供範例資料和測試案例 指定程式碼風格和慣例 例如針對筆記軟體的案例:   「建立一個支援 AI 功能純文字筆記,輸入內容可即時渲染;需支援儲存到本地檔案,提供標籤欄位做分類;以 React 架構,程式風格採用 Tailwind style components 並使用 hooks。」 開發工具選擇 開發工具的選擇 同樣重要,目前市場上主要的 ...

Claude Code Hooks:自動化與安全的最佳實踐

寫在最前頭,這份文章主要寫起來是給自己看, 同時內容是比較適合開發者,工程師們可以做些自動化處理的簡單筆記。 Claude Code hooks Claude Code hooks 是一種強大的自動化機制,允許用戶在 Claude Code 的不同生命週期階段,自定義執行 shell 指令。這種設計讓開發者能夠將規則和自動化行為嵌入到應用層級,確保每次都能可靠執行,而不必依賴 LLM(大型語言模型)是否會選擇執行某項操作。 Hooks 的核心用途 通知 :自訂收到 Claude Code 等待用戶輸入或執行權限時的提醒方式。 自動格式化 :如在每次檔案編輯後自動執行 prettier (針對 .ts 檔)、 gofmt (針對 .go 檔)等。 日誌記錄 :追蹤所有執行過的命令,便於合規或除錯。 自動反饋 :當 Claude Code 產生不符合團隊規範的程式碼時,自動給出反饋。 自訂權限 :阻擋對生產環境檔案或敏感目錄的修改[^1]。 配置與結構 Hooks 透過設定檔進行配置,分為全域( ~/.claude/settings.json )、專案( .claude/settings.json )、本地專案( .claude/settings.local.json )以及企業級策略設定。每個 hook 由「事件名稱」和「匹配器」組成: "hooks": { "PreToolUse": [ { "matcher": "Bash", "hooks": [ { "type": "command", "command": "jq -r '...'" } ] } ] } matcher :用於匹配工具名稱(支援正則表達式),如 Write 、 Edit|Write 、 Notebook.* 。 hooks :當匹配時要執行的命令陣列。 type :目前僅支援 "command" 。 ...

[CSS] z-index 在不同瀏覽器繼承問題

今天會討論到這個課題,是因為要實做一個Popup dialog,所以我們希望的結果如下圖。 可是在IE7 卻發生了這樣的情況。 Popup不論怎麼設定z-index都無法浮在最上層,我們看一下html架構發生什麼事情。