NPM & Node.js & Package.json的關係與使用


Posted by hoyi-23 on 2021-07-18

什麼是 NPM ?

想像這個情境,當我們完成Sass檔案後,瀏覽器沒有辦法直接閱讀Sass檔,所以我們需要先編易它,編譯的方式有很多種,其中一種是使用 Gulp 來即時編譯Sass 。 而 Gulp 就是 NPM 中的一個包裹。
NPM 全名是 Node Package Manager,它是 node.js 預設的 node套件管理平台,運用NPM我們可以更方便的進行套件管理(安裝、升級與刪除)。

Node.js 和 NPM 的關係 ?

Node.js 由 是JavaScript編寫。它的優點是可以讓 前後端語言統一開發,來提升效率及便利性。
Node.js可以把它想成是「能在後端運作的 JavaScript」

我們平常在寫得JavaScript是寫給瀏覽器去執行的。而Node.js是在我們伺服器端的環境運行。

而 NPM 就是 Node.js 中的其中一個功能,它是Node.js所提供的 node套件管理平台。
所以 Node.js的套件被稱為 NPM Package。
透過NPM,我們可以在node線上套件庫,下載各式各樣的JavaScript套件。
Node.js 內有很多套件, 包含我們常用的 Gulp、webPack、Vue、React 等 檔案大小從大至小都有。

我們使用Node.js的服務,用NPM做套件管理

(Node.js 和 NPM 有點綁在一起的感覺,會同時安裝)

下載完成後,可以於終端機輸入: npm -v node -v 來看下載是否成功(會顯示download version)

Package.json 是甚麼?

下載完 NPM 和 Node.js 後,在專案什麼都沒有時,會先將專案初始化,這時候進入你的編輯器輸入 npm init
初始化會需要你提供專案資訊並且在完成後建立 Package.json 的檔案。 這個檔案可以幫你紀錄你在這個專案中所使用的所有套件(名稱、Version..),當多人要一起維護或製作網站時,當他們下載檔案後執行 npm install,可以直接將Package.json檔案內的所有專案中使用的套件一起載入。

通常你會看到 package-lock.json,它其實和Package.json一樣,只是因為套件會有更新版本,在每次下載時都會自動下載最新的,但是有時候地更新會導致專案上版本不合等等問題,所以package-lock.json會保證讓別人下載時,下載原本專案使用的相同版本。

載入NPM流程:

  1. 下載 NPMNode.js
  2. 初始化-需要寫入專案資訊(會建立Package.json)
    |--package name:專案名稱 (只能是小寫英文)
    |--version:專案版本 (預設會是 1.0.0)
    |--description:專案描述
    |--entry point:專案進入點
    |--test command
    |--git repository
    |--keyword
    |--author
    |--License
    如果不知道要打什麼沒關係,基本上只要一直enter就好。
    完成後就會在目錄看到Package.json檔案。點進去就會看到剛剛填寫的專案資料。

  3. 開始下載各種套件

如何下載 NPM 套件?

下載了 NPM 和 Node.js 並初始化完成後,你可以開始載入 NPM Package。
載入 NPM Package 的方式有兩種:

  • Global Install npm install -g 套件名稱
  • Local Install npm install 套件名稱

這兩個的不同在於,Local Install 是在你的專案裡面載入,你所載入的套件只能在這個專案中使用。而Global Install 也就是相反的意思啦!

一個Global Install 的例子就是: Gulp Cli
Gulp Cli 讓你在每次進入不同專案後 輸入 Gulp 就可以開始執行。
這就是一個典型的 Global Install。


延伸閱讀: 什麼是Cli?


下載套件後要將它更新到 Package.json,所以要再輸入 npm install 套件名稱 --save


有些人會習慣將所有需要套件與版本先寫好在Package.json,再利用執行來下載。

需要下載那些 NPM 套件?

這取決於你要做的專案,如果你要使用Vue.js,你就需要下載 Vue套件、WebPack套件等,如果你使用Sass,就需要使用Gulp來編譯。

Package-lock.json細節介紹

以下載 gulp套件為例子
開始下載套件後,你會發現多了一個Package-lock.json
點進去你會看到有很多資料。

點進Package.json你也會發現,比最剛開始在 dependencies裡多了 gulp 和版本


dependencie 是 相依性套件 的意思。
Package.json 就是你的這個專案所相依(使用)的套件。
而因為 不同的套件 可能又是相依了某些其他的套件產生,所以你才會看到在node_module裡面有好多好多東西。
Package-lock.json也就是又在列出每個套件所相依的套件。

node_module內的東西就是所有載入的node套件
你可以使用 npm list 來看所有載入的套件與版本

更新套件 - 關於版本的小知識

直接更新到最新版本 npm update

為什麼要了解版本?

很多套件都是由不同的套件組成,套件都有可能會更新,每次在下載時,Node.js會自動下載最新的套件版本,但是套件版本有時候的更新會影響整個專案,可能會導致專案出現問題,所以要了解版本來確保更新的正確又安全。

關於版本

版本的寫法通常是由三組數字組成,例如: 5.0.0 / 1.11.22 。
這三個數字分別代表甚麼呢?

  • 第一組數字: Major version
  • 第二組數字: Minor version
  • 第三組數字: Patch version

第一組數字用在當更新有很大的改變時並且跟以往的無法兼容時,第一組數字變更時要非常小心,因為可能一更新你的專案就會掛掉QQ(當第一組數字變更時,後面兩組數字會歸零)

第二組數字用在當更新是可以兼容的一些功能,理論上不會影響到使用舊版本的專案。

第三組數字用在當更新只是在修除一些小bug,不會影響任何使用舊版本的專案。


前面有提到版本更新時,因為可能導致問題所以有了Package-lock.json
其實在Package.json內也有這樣的設置,但是沒有到那麼極致(完全相同版本)。
在前面Package.json的圖片中,顯示版本的最前面會看到 ^的符號,這個符號是在告訴node.js在下載時,如果最新版本的Major(第一組數字)更新,就不會下在那個最新版本。
例如: ^4.1.1 如果最新更新為 ^4.2.2會一樣更新。但若更新為^5.0.0就不會更新為這個版本。
若你想要完全維持一模一樣的版本,就可以有Package-lock.json


那如果我是想要更新到最新版本或指定版本呢?

你可以

  1. 輸入 npm install 套件@lastest
  2. 直接指明要哪個major版本 npm install 套件@版本(major)數字,這個會直接更新到此major的最新版本。
  3. 直接指明要更新到哪個minor版本npm install 套件@版本數字(major.minor)

刪除套件

使用語法 npm uninstall 套件名稱
但要注意,這樣並更新 package.json !!!!
需要再下
npm uninstall 套件名稱 --save
這樣才能也一起更新 package.json 的資訊


#npm #node.js #package.json







Related Posts

讀書筆記-JavaScript技術手冊3: 基本語法(流程、迴圈)

讀書筆記-JavaScript技術手冊3: 基本語法(流程、迴圈)

上班不如賣雞排?軟體工程師背後的問題

上班不如賣雞排?軟體工程師背後的問題

C & JAVA-基本概念與差異 (整理中)

C & JAVA-基本概念與差異 (整理中)


Comments