【前端工具】套件的管理者 - npm
有些專案需要用到很多套件，需要一個個去找套件的官網，然後找到 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
在全新專案中使用 npm
npm 初始化
打開 CLI 介面，路徑來到專案資料夾，並執行指令：
npm init
上面的指令會需要填寫專案相關內容，如果懶得填寫，可以下這個指令快速略過：
npm init -y
接著會發現專案中生成 package.json 檔案，內容如下：
安裝套件
可以到 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 比較保險。
執行指令後會發現專案裡出現了這些更動：
- 出現 node_module 資料夾：安裝的套件和相依套件會放到這裡
- 出現 package-lock.json：專案實際安裝的套件版本，通常不會手動更動
- package.json 檔案內容有更動：dependencies 出現該套件和版本號
其他安裝方式
- 安裝指定版本
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
- 注意各個套件的安全性，之前沒有使用過的還是要查詢一下之前是否有出現安全性問題。
今天就介紹到這裡，如果撰寫內容有誤歡迎告知。
為什麼會看到廣告
留言0
查看全部
