【前端工具】套件的管理者 - 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
raw-image

在全新專案中使用 npm

npm 初始化

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

npm init

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

npm init -y

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

raw-image

安裝套件

可以到 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 出現該套件和版本號
raw-image

其他安裝方式

  • 安裝指定版本
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
留言分享你的想法!
avatar-img
傑米的沙龍
7會員
30內容數
正在一點一滴學習程式,相信知識量總有一天會匯聚成大海,目前專門研究前端中。
你可能也想看
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
全球科技產業的焦點,AKA 全村的希望 NVIDIA,於五月底正式發布了他們在今年 2025 第一季的財報 (輝達內部財務年度為 2026 Q1,實際日曆期間為今年二到四月),交出了打敗了市場預期的成績單。然而,在銷售持續高速成長的同時,川普政府加大對於中國的晶片管制......
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
重點摘要: 6 月繼續維持基準利率不變,強調維持高利率主因為關稅 點陣圖表現略為鷹派,收斂 2026、2027 年降息預期 SEP 連續 2 季下修 GDP、上修通膨預測值 --- 1.繼續維持利率不變,強調需要維持高利率是因為關稅: 聯準會 (Fed) 召開 6 月利率會議
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
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
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
npm(全名 Node Package Manager,node套件管理器)
Thumbnail
npm 是一個套件管理工具,開發中經常需要使用第三方套件,npm 是可以用來管理很多套件的工具,這邊指的套件可能是 Library, 框架, 工具等,例如 Bootstrap, jQuery, Vue.js, babel 都可以統一由它管理。
Thumbnail
npm 是一個套件管理工具,開發中經常需要使用第三方套件,npm 是可以用來管理很多套件的工具,這邊指的套件可能是 Library, 框架, 工具等,例如 Bootstrap, jQuery, Vue.js, babel 都可以統一由它管理。
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
本篇適合: > 剛開始學習 HTML / CSS ,對基本語法有了解的人 > 想要快速建立一個一頁式網站,但對 CSS 仍無法很活用的人 初始設定與 Bootstrap 中文版網頁使用 在過去在大學期間擔任助教的過程,常常有人問「Bootstrap」是什麼?一來我也不是什麼前端工程師,我一時也不太知
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
Thumbnail
前言 Vue 在過去的一兩年內快速發展,寫法也一直改變,我在過去一年多也更改了兩次寫法,在這個系列中我將以最新的 composition api + typescript 寫法進行教學。 javascript 有兩大痛點,一個是異步問題,另一個是弱型別。要渲染畫面一定要多線程同時異步處理,不然真的一
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
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
Thumbnail
React開發有兩種方式,一種是使用CDN方式include react的官方lib,然後使用babel來將JSX編譯成瀏覽器看得懂的javascript。 但是在react中還會使用到sass, scss等等,還需要額外編譯成css瀏覽器才看得懂。 而webpack的誕生,就是為了解決上述的問題,
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News