iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0

從頭到尾硬幹一個網站是非常費功費時的事情,為了節省開發時間就會盡量引用現成的套件,隨著引用的套件越來越多,就會需要管理這些套件的種類、版本,接著就來學習套件管理工具的使用。


1. Node.js & NPM

過去 JavaScript 大多只用在前端,Node.js 出現後跨足到了後端領域,NPM(Node Package Manager) 是包含在 Node.js 內的套件管理工具,雖然前端工程師在學習初期不會接觸到後端伺服器的架設,但 NPM 是無論前後端都會學習、使用到的重要工具。


2. Yarn

Yarn 也是一個套件管理工具,在安裝速度、安全性及穩定性相對 NPM 都較好,操作指令也大致相同,在團隊開發時可以確認使用的管理工具,不宜將 NPM 和 Yarn 混用,可能會有些設定上的問題。


3. 安裝步驟

  1. 到官方網站下載 Node.js 安裝檔(建議選左邊的 LTS 穩定支援版本)

  2. NPM 在 Node.js內,無需另外安裝,我們可以使用 npm 指令下載 yarn

$ npm install --g yarn

官網連結
Node.js
Yarn

  1. 完成後可以輸入指令查詢版本
// Node.js
$ node -v

// NPM
$ npm -v

// Yarn
$ yarn -v

本篇文章撰寫時使用的套件版本
https://ithelp.ithome.com.tw/upload/images/20211005/20129729wDHfgbO8ai.png


4. Node.js 簡易操作

因為這次文章不會練習到伺服器功能,這邊只簡單介紹

  1. 進入 node.js
$ node
  1. 可以試著讓他吐一點東西出來
$ console.log('Hello, world!')
  1. 看看有哪些指令可用
$ .help
  1. 離開 node.js
$ .exit

5. NPM 起手勢

  1. 新增一個專案資料夾

  2. 使用 VS Code 開啟專案資料夾

  3. 切換到終端機介面(ctrl + `)

  4. 初始化
    輸入指令後,會依序詢問『專案名稱、版本、描述、進入點、測試指令、Git儲存庫、關鍵字、作者、授權方式』,不知道要打什麼的時候就一路 Enter 到底就好,會套用預設值(寫在小括弧內)。

    $ npm init
    
    // 跳過環境設定,直接用預設值建立。
    $ npm init -y
    

6. 安裝/移除套件

  1. 大部分的套件安裝只要輸入指令 npm install 套件名稱 或是簡寫 npm i 套件名稱即可:

    // Bootstrap
    $ npm install bootstrap
    
    // Font Awesome
    $ npm i fontawesome
    
    // MacOS 如果遇到權限不足的錯誤,在指令前方加上 sudo,並且提供使用者帳號密碼
    $ sudo npm install 套件名稱
    
  2. 移除套件指令是npm uninstall 套件名稱 或是簡寫 npm r 套件名稱,r 在此為 remove 的縮寫。

7. 檔案功用說明

裝完管理工具和套件後,專案資料夾會多了一些檔案,功用分別如下:

  1. package.json
  • 是整個專案的縮影,記錄了基本資訊、指令定義和使用的套件種類、版本...等資訊,團隊合作時,不需將所有相依套件打包提供其他成員下載,其他成員只需要取得 package.json 檔案後執行 npm install(i) 指令,就會自動安裝成相同的開發環境了。
  • 在安裝套件後,package.json 檔案內的 dependencies 記錄套件名稱、版本資訊,通常版本的數字前面會有一個 ^ 符號,表示如有更新的版本就會下載最新的。
  1. package-lock.json
  • 工作團隊成員可能加入的時間不同,當新成員執行 npm i 指令時可能會有部分的套件下載到更新的版本,如果希望團隊的套件版本一致,就可以把這個 package-lock.json 也提供給其他成員,裡面會指定下載的版本;反之,如果希望團隊成員都使用最新版本,就不需要提供這個檔案
  1. node-modules 裡面存放著下載回來的套件實體檔案。
    https://ithelp.ithome.com.tw/upload/images/20211005/20129729IobskSFiu9.png

8. 全域安裝

套件安裝在全域環境中,就不需在個別專案重複安裝。

全域安裝通常用在僅個人使用的本地套件,例如:安裝本地的套件管理工具 Yarn。

$ npm install -g 套件名稱

9. 開發版本

有些套件是上線時會使用(例如:jQuery, Bootstrap...),有些是僅在開發中使用(例如:Webpack, 各種預處理器...),開發用的套件並不需要上線部署,所以我們可以把它分成開發、上線兩類存放。

  1. 上線版:前面學到的指令就是上線版,在某些較舊的文章會看到需要加上 --save 這個參數,在 npm5 版本以後這已經是預設值,不需要另外撰寫。
  2. 開發版:
  • npm install -dev 套件名稱 或是簡寫成 npm i -D 套件名稱(注意,D需要是大寫)。
  • 開發版的套件會註記在 package.json 中的 "devDependencies" 屬性,和上線版的 "dependencies" 不同,可以觀察一下確認是否成功裝對位置。
    https://ithelp.ithome.com.tw/upload/images/20211005/20129729eJZJMY6b3s.png

10. NPM 與 Yarn 指令對照

在完成了基本的練習後,也可以試著使用 Yarn 從頭做一次
NPM | Yarn | 說明
------------- | -------------
npm install | yarn install | 安裝所有 dependencies 內的套件
npm install 套件名稱 | yarn add 套件名稱 | 安裝指定套件(上線版)
npm install -D 套件名稱 | yarn add -D 套件名稱 | 安裝指定套件(開發版)
npm install —g 套件名稱 | yarn global add 套件名稱 | 全域安裝指定套件
npm uninstall 套件名稱 | yarn remove 套件名稱 | 移除指定套件
npm update | yarn upgrade | 更新所有 dependencies 內的套件
npm update 套件名稱 | yarn upgrade 套件名稱 | 更新指定套件

詳細指令比較參考網站
(Cheat Sheet: npm vs Yarn Commands)[https://www.digitalocean.com/community/tutorials/nodejs-npm-yarn-cheatsheet]


上一篇
[Day12] Git 學習總整理
下一篇
[Day14] Webpack 入門 - 環境設定篇
系列文
MacOS新手操作指令學習紀錄,成為裝B前端工程師之路33
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言