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

什麼是 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. 下載 NPM 和 Node.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 的資訊