【前端工具】套件的管理者 - npm
閱讀時間約 5 分鐘
有些專案需要用到很多套件，需要一個個去找套件的官網，然後找到 Get started 頁面，再想辦法從大量的文字中找到下載連結，接著把下載好的套件移到專案的某個資料夾裡，當套件下載越來越多以後，說不定還會遇到一些奇怪的衝突。
天啊，真的好麻煩！有沒有方法可以直接把套件下載下來，統一放到一個資料夾管理呢？不妨考慮看看 npm ，讓它幫助你解決這些煩惱吧！
npm 是什麼？
全名為 Node Package Manager，是一個套件管理工具，以 JavaScript 編寫而成，開發中經常需要使用第三方套件，就可以使用 npm 管理這些套件，這邊指的套件可能是 Library、框架、工具等，例如 Bootstrap, jQuery, Vue.js, babel 都可以統一由 npm 管理。
為什麼要用 npm？
一個工具的出現，通常都是因為它解決了某些問題，也可以說是它的優點，npm 優點如下：
- 當有套件需要安裝時，不需要自行到套件的官網或 GitHub 查找，省下安裝時間
- 統一管理套件，避免套件讓專案中的檔案變得雜亂
- 不需要「自行」重新下載專案中使用的所有套件
- 當多個套件的相依套件有重複或版本不相容時，npm 會避免重複下載和解決衝突
什麼是相依套件？
該套件有再使用到其他套件，例如 Bootstrap 4 需要安裝 jQuery 和 popper.js
安裝 npm
- 安裝 node.js，裡面就會包含 npm，請選擇 LTS 版本安裝
- 在 CLI 介面輸入指令，確認是否安裝成功，有出現版本號就完成了，就是這麼簡單！
查詢 node 是否安裝成功
node -v
查詢 npm 是否安裝成功
npm -v
在全新專案中使用 npm
npm 初始化
打開 CLI 介面，路徑來到專案資料夾，並執行指令：
npm init
上面的指令會需要填寫專案相關內容，如果懶得填寫，可以下這個指令快速略過：
npm init -y
接著會發現專案中生成 package.json 檔案，內容如下：
安裝套件
可以到 npm 官網 查詢套件安裝指令
npm install 套件名稱
- 縮寫
npm i 套件名稱
需要注意的是，npm v5.0.0 以後該指令等同於以下指令：
npm install 套件名稱 --save
代表的是將套件安裝在專案環境中的已發布環境，npm v5.0.0 之前，如果沒有寫 --save，package.json 裡的 dependencies 就不會紀錄安裝的套件。在 v5.0.0 之後變成預設指令，所以就算不寫 --save 意思也是相同的，可以注意一下自己的 npm 版本號，或是統一加上 --save 比較保險。
執行指令後會發現專案裡出現了這些更動：
- 出現 node_module 資料夾：安裝的套件和相依套件會放到這裡
- 出現 package-lock.json：專案實際安裝的套件版本，通常不會手動更動
- package.json 檔案內容有更動：dependencies 出現該套件和版本號
其他安裝方式
- 安裝指定版本
npm install 套件名稱@版本號
- 安裝在全域環境
npm install 套件名稱 -g;
- 安裝在專案環境中的已發布環境
npm install 套件名稱 --save
在 npm v5.0.0 之後變成預設指令，所以就算不寫 --save 意思也是相同的
npm install 套件名稱
- 安裝在專案環境中的開發中環境
像是編譯程式碼的套件，在已發布環境就不需要了，比如 babel, scss 等套件
npm install 套件名稱 –save-dev
在既有專案中使用 npm
例如從 GitHub Clone 下來的 Repository，看它有沒有 package-lock.json 檔案，只要執行以下指令：
npm install
全部套件都會依照 package.json 檔案裡的 dependencies 描述安裝回來了，是不是很神奇！
npm 其他常見指令
移除套件
npm uninstall 套件名稱
- 縮寫
npm uni 套件名稱
查看版本
- 查看 npm 本身的版本
npm -v
- 查看套件版本
npm 套件名稱 -v
更新套件
npm update 套件名稱
查看目前安裝的套件
npm list
- 縮寫
npm ls
注意事項
- node_modules 檔案夾「千萬不要」進版控！如果是用 git 版控的話，想要避免該檔案夾進入版控，只要在專案根目錄中新增一支 .gitignore 檔案，並寫入以下內容：
node_modules
- 注意各個套件的安全性，之前沒有使用過的還是要查詢一下之前是否有出現安全性問題。
今天就介紹到這裡，如果撰寫內容有誤歡迎告知。
為什麼會看到廣告
留言0
查看全部
你可能也想看
Google News 追蹤
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
可能包含敏感內容
先說一下我的背景，非本科系從 2022/3 開始接觸到前端領域，在摸索過程中遇到六角學院，買了 ＨTML 和 CSS 課程從基礎學起。
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
周二
重點聚焦日央行利率決議，儘管調整政策的可能性不大，但市場依然心存警惕，因為此前兩周對於日央行可能做出政策轉向的消息層出，導致美元兌日元隱含波動率維持在高位。本次決議隨着日央行正面回應政策前景，預計會再次給日元帶來明顯的震蕩。
歐元區和加拿大公布11月CPI，預計歐元區CPI年率終值維持在2
Qwertykeys主打中價位的客製化鍵盤，這次會入手，主因是想玩它的Gasket結構，據說聲響及穩定度都有不錯的表現。
如有需要可以不用浪費效能重新將整個頁面重新載入，可以使用非同步的JS，使用動態載入資料
ANKH原意為生命之鑰，是古埃及藝術用來代表生命的符號。Ankh Numpad延續Aaru的浮雕風格，摘錄了羅塞塔石碑的聖碑體倒數4~5排的部份文字，讓原本單純的Numpad鍵盤賦予更深一層的意涵，若再搭配TKL的Aaru，能讓按鍵功能更加完整，自然不能錯過啦~
現在車子的安全輔助配備越來越多
你開車時會使用到哪幾項呢?
今天讓我們來了解一下
BMW寶馬車款的駕駛輔助套件吧!!
里程數非常的低
只有16196MILES
客人當初的要求是車子越新越好
配備方面沒有特別要求
小編趕緊上網幫陳董找車
找到了這一台很新並且里程數很低的車
沒想到調配表一看
挖賽~~配
`npm query` 是從 npm v8.16.0 開始最新的指令, 他接收一個 Dependency Selector(如同在 Dependency Selector Syntax Specification 所定義的) 然後回傳一個從你的專案的 dependencies 篩選過後的 JSON
這個秋，Chill 嗨嗨！穿搭美美去賞楓，裝備款款去露營⋯⋯你的秋天怎麼過？秋日 To Do List 等你分享！
秋季全站徵文，我們準備了五個創作主題，參賽還有機會獲得「火烤兩用鍋」，一起來看看如何參加吧～
美國總統大選只剩下三天， 我們觀察一整週民調與金融市場的變化（包含賭局）， 到本週五下午3:00前為止， 誰是美國總統幾乎大概可以猜到60-70%的機率， 本篇文章就是以大選結局為主軸來討論近期甚至到未來四年美股可能的改變
Faker昨天真的太扯了，中國主播王多多點評的話更是精妙，分享給各位
王多多的點評
「Faker是我們的處境，他是LPL永遠繞不開的一個人和話題，所以我們特別渴望在決賽跟他相遇，去直面我們的處境。
我們曾經稱他為最高的山，最長的河，以為山海就是盡頭，可是Faker用他28歲的年齡...
可能包含敏感內容
先說一下我的背景，非本科系從 2022/3 開始接觸到前端領域，在摸索過程中遇到六角學院，買了 ＨTML 和 CSS 課程從基礎學起。
本文介紹如何使用Vite建立前端開發初始檔案，並加入Tailwindcss的教學。透過指令和配置檔，讓你能快速建立個人專案的開發環境，並學習如何加入全域的Tailwindcss樣式。還有影片教學、資源連結和更多相關教學文章等，幫助你進一步學習。
在軟體開發領域中，Backend 和 Frontend 是兩個常被提及的術語。許多同學常常問我，到底是 Backend 比較難還是 Frontend 比較容易？
周二
重點聚焦日央行利率決議，儘管調整政策的可能性不大，但市場依然心存警惕，因為此前兩周對於日央行可能做出政策轉向的消息層出，導致美元兌日元隱含波動率維持在高位。本次決議隨着日央行正面回應政策前景，預計會再次給日元帶來明顯的震蕩。
歐元區和加拿大公布11月CPI，預計歐元區CPI年率終值維持在2
Qwertykeys主打中價位的客製化鍵盤，這次會入手，主因是想玩它的Gasket結構，據說聲響及穩定度都有不錯的表現。
如有需要可以不用浪費效能重新將整個頁面重新載入，可以使用非同步的JS，使用動態載入資料
ANKH原意為生命之鑰，是古埃及藝術用來代表生命的符號。Ankh Numpad延續Aaru的浮雕風格，摘錄了羅塞塔石碑的聖碑體倒數4~5排的部份文字，讓原本單純的Numpad鍵盤賦予更深一層的意涵，若再搭配TKL的Aaru，能讓按鍵功能更加完整，自然不能錯過啦~
現在車子的安全輔助配備越來越多
你開車時會使用到哪幾項呢?
今天讓我們來了解一下
BMW寶馬車款的駕駛輔助套件吧!!
里程數非常的低
只有16196MILES
客人當初的要求是車子越新越好
配備方面沒有特別要求
小編趕緊上網幫陳董找車
找到了這一台很新並且里程數很低的車
沒想到調配表一看
挖賽~~配
`npm query` 是從 npm v8.16.0 開始最新的指令, 他接收一個 Dependency Selector(如同在 Dependency Selector Syntax Specification 所定義的) 然後回傳一個從你的專案的 dependencies 篩選過後的 JSON