前端的社群發展愈來愈蓬勃，延伸出各式各樣基於 HTML、CSS、JS 的開源套件，像是 Bootstrap、React、Vue、Styled-components 等等，幫助我們能使用這些工具加速開發。而為了管理這些大量的套件，並且方便引入專案，就有了 npm、Yarn 這類的套件管理工具出現。

套件管理工具 — npm

npm (Node Package Manager)，是 Node.js 發展的一個套件管理器，幫助開發人員方便的共享開源套件，可以輕鬆引入套件道專案中使用。

Node.js 是讓電腦能以 Command line 的方式在伺服器端執行 JavaScript 的開放原始碼。

安裝 npm

Step1：直接透過官網下載 Node.js，裡面會直接包含 npm

Step2：開啟終端機(Terminal)，所有 npm 指令會在這裡執行

Step3：輸入 node -v、npm -v，如果有出現版本資訊就是安裝成功囉！

下載套件

終端機會有一個預設的路徑，但我們是要在專案中新增套件，所以要先將路徑指到指定的專案資料夾才能輸入 npm 指令；或者是你也可以直接利用 Vscode 開啟專案資料夾，Vscode 內建的 Terminal 會自動幫你指向該路徑。

Vscode 內建的 Terminal 會自動指向該專案的路徑

首先輸入 npm init，它會要你輸入一些專案的資訊，然後就會創建 package.json 文件，用來列出專案使用的所有套件包括版本資訊。

npm init

接著就可以透過 npm install 指令下載指定的套件，會被放在專案中的 node_modules 資料夾中。讓我們先觀察一下，下載套件後 package.json 所記錄的套件資訊：

套件分別被記錄在兩個區塊 dependencies 與 devDependencies，那者兩者有什麼差別？

• dependencies：在開發完專案發佈到伺服器上後仍然會使用到的套件。
• devDependencies：只用在開發環境中的套件。

為了將想要的套件安裝在指定的環境中，在使用 npm install 下載套件時，加上 --save 代表會同時安裝到 dependencies 和 devDependencies；而加上 --save -dev 則是只會安裝在開發環境 devDependencies下。

// dependencies 和 devDependencies
npm install --save package;

// devDependencies
npm install --save-dev package;

小結

知道如何使用 npm 後，我們就可以開始使用便利的套件加速該發，在下一章就會提到打包工具 webpack，讓這些套件能夠引入程式碼中使用，並且轉換成瀏覽器看得懂的文件。

如果文章中有錯誤的地方，要麻煩各位大大不吝賜教；喜歡的話，也要記得幫我按讚訂閱喔❤️

參考資料

• npm
• 從零開始: 使用NPM套件
• NPM是什麼？了解Node Package Manager套件管理機制
• Node.js 是什麼？NPM又是什麼？為什麼前端與後端都需要用它們呢？
• 弄懂 npm install 的 –save 與 –save-dev