iT邦幫忙

2024 iThome 鐵人賽

DAY 20
0
JavaScript

30天 JavaScript 提升計畫:從零到精通結合2024年的創新功能系列 第 20

第 20 天:JavaScript 工具鏈 - 包管理

  • 分享至 

  • xImage
  •  

使用 npm 和 yarn


npm
npm (Node Package Manager,節點套件管理器)是 Node.js 的預設套件管理器,擁有最大的套件儲存庫,主要幫助開發者安裝、分享和管理 JavaScript 代碼包,也可以用指令 npm install -g npm 更新至最新版本。

以下是常用的指令:

指令 說明
npm init 創建一個新的 package.json 文件
npm install <package-name> 安裝套件及其相依性
npm uninstall <package-name> 卸載指定的套件
npm update 將所有套件更新到最新版本
  • 優點:Node.js 的預設套件管理器,擁有大型套件儲存庫,易於使用且廣泛採用
  • 缺點:處理大型專案或安裝許多軟體包時可能會很慢

為什麼需要 npm?
因為它簡化了開發人員的生活,開發人員可以使用 npm 來尋找執行特定任務的套件,也就是預先編寫的程式碼模組,而不是從頭開始編寫每一段程式碼。

npm 充當了一座橋樑,讓開發人員能夠站在巨人的肩膀上,透過社群驅動的努力來更有效率、更健壯地建立應用程式。

為什麼需要 npm
烤肉季到了,如果沒有烤肉公司就只能自己跑市場、超商...購買食材和烤肉器具,但是有了專業的公司可以一手包辦,只要提出需求就可以一通電話貨到服務

yarn
yarn (Yet Another Resource Negotiator)是 Facebook 開發的一個替代 npm 的包管理工具,旨在提高安裝速度和可靠性,可以透過執行 npm install -g yarn 指令使用 npm 安裝 yarn,並透過執行 yarn -v 進行檢查。

以下是常用的指令:

指令 說明
yarn init 創建新的 package.json 文件
yarn add <package-name> 安裝套件並將其新增至專案的依賴項中
yarn remove <package-name> 從專案中刪除套件
yarn upgrade 將所有套件升級到最新版本
  • 優點:比 npm 更快、良好的安全功能、高效能快取套件以供離線使用
  • 缺點:缺乏 npm 所具有的一些功能,可能不與 npm 註冊表中的所有套件相容

npm vs yarn 哪一個比較好?
這取決於項目的具體需求,沒有一個「最好的」套件管理器,因為每個套件管理器都有自己的優點和缺點,但它們都具有管理專案依賴關係的相同目的。

總之,這取決於個人喜好和專案的具體需求,一些開發人員可能更喜歡 npm,因為它被廣泛採用,而其他開發人員可能更喜歡 yarn 或 pnpm,因為它們的性能和效率,重要的是要考慮每種方案的優點和缺點,並選擇最適合專案需求的方案。

就像我習慣使用 npm ,我的夥伴習慣用 yarn ,這樣怎麼配合?這時候就請專案負責人評估專案比較適合哪個方案,畢竟沒有所謂的對錯,只有適不適合!

yarn is faster than NPM

圖片來源:Amogh Gupta posted on LinkedIn

創建和管理專案的 package.json


package.json 是 Node.js 項目的核心文件,定義了項目的元數據和依賴關係。

如何使用 NPM 套件?
使用 npm 從終端機或命令提示字元中的簡單命令開始,通常會先使用 npm init 初始化一個新項目,這會建立一個 package.json 檔案來追蹤項目的依賴項,需要套件時,可以使用 npm install <package-name>,npm 從其註冊表中取得該套件並將其新增至您的專案中,同時更新 package.json 檔案以包含新的依賴項。

基本信息
name:專案名稱,唯一且小寫表示。
version:專案版本號。
description:專案描述。
keywords:一系列的關鍵文字,可以幫助其他人找到自己的專案。
main:專案的入口文件,預設 index.js
scripts:定義可執行的命令,如 start, test, build 等。

依賴管理
dependencies:運行時需要的包。
devDependencies:開發和測試過程中需要的包。

其他配置
repository:代碼庫的位置。
author:專案的作者。
license:專案的授權信息。
engines:指定和專案相容的 node.js 和 npm 版本。
browserslist:定義支援的瀏覽器。
config:定義自定義的配置。


上一篇
第 19 天:常見的記憶體洩漏問題和解決方法
下一篇
第 21 天:JavaScript 的事件處理和他的 DOM
系列文
30天 JavaScript 提升計畫:從零到精通結合2024年的創新功能30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言