【前端工具】套件的管理者 - 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
vocus|新世代的創作平台

在全新專案中使用 npm

npm 初始化

打開 CLI 介面,路徑來到專案資料夾,並執行指令:

npm init

上面的指令會需要填寫專案相關內容,如果懶得填寫,可以下這個指令快速略過:

npm init -y

接著會發現專案中生成 package.json 檔案,內容如下:

vocus|新世代的創作平台

安裝套件

可以到 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 比較保險。

執行指令後會發現專案裡出現了這些更動:

  1. 出現 node_module 資料夾:安裝的套件和相依套件會放到這裡
  2. 出現 package-lock.json:專案實際安裝的套件版本,通常不會手動更動
  3. package.json 檔案內容有更動:dependencies 出現該套件和版本號
vocus|新世代的創作平台

其他安裝方式

  • 安裝指定版本
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
  • 注意各個套件的安全性,之前沒有使用過的還是要查詢一下之前是否有出現安全性問題。


今天就介紹到這裡,如果撰寫內容有誤歡迎告知。

留言
avatar-img
傑米的沙龍
8會員
30內容數
正在一點一滴學習程式,相信知識量總有一天會匯聚成大海,目前專門研究前端中。
你可能也想看
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
5 月將於臺北表演藝術中心映演的「2026 北藝嚴選」《海妲・蓋柏樂》,由臺灣劇團「晃晃跨幅町」製作,本文將以從舞台符號、聲音與表演調度切入,討論海妲・蓋柏樂在父權社會結構下的困境,並結合榮格心理學與馮.法蘭茲對「阿尼姆斯」與「永恆少年」原型的分析,理解女人何以走向精神性的操控、毀滅與死亡。
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
npm 是一個套件管理工具,開發中經常需要使用第三方套件,npm 是可以用來管理很多套件的工具,這邊指的套件可能是 Library, 框架, 工具等,例如 Bootstrap, jQuery, Vue.js, babel 都可以統一由它管理。
Thumbnail
npm 是一個套件管理工具,開發中經常需要使用第三方套件,npm 是可以用來管理很多套件的工具,這邊指的套件可能是 Library, 框架, 工具等,例如 Bootstrap, jQuery, Vue.js, babel 都可以統一由它管理。
Thumbnail
`npm query` 是從 npm v8.16.0 開始最新的指令, 他接收一個 Dependency Selector(如同在 Dependency Selector Syntax Specification 所定義的) 然後回傳一個從你的專案的 dependencies 篩選過後的 JSON
Thumbnail
`npm query` 是從 npm v8.16.0 開始最新的指令, 他接收一個 Dependency Selector(如同在 Dependency Selector Syntax Specification 所定義的) 然後回傳一個從你的專案的 dependencies 篩選過後的 JSON
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
NPM 全稱為 ( Node Package Manager ),直接翻譯就是 "node套件管理器" ,是 Node.js 預設的,當下載 Node.js 時也會一並下載到本機端並安裝,而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境,可謂是前端開發的好朋友。
Thumbnail
NPM 全稱為 ( Node Package Manager ),直接翻譯就是 "node套件管理器" ,是 Node.js 預設的,當下載 Node.js 時也會一並下載到本機端並安裝,而 Node.js 則是能讓 JavaScript 語法實現在後端伺服器運行的一種環境,可謂是前端開發的好朋友。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News