前言
本文會說明如何在專案中引入以 Node.js 套件發佈的前端相關工具;即使專案本身不使用 Node.js 程式也可以用 NPM (Node.js 套件管理程式) 管理有關 Node.js 套件的部分;因此,即使我們專案的主要語言不是 JavaScript,還是可以花一點點時間學一下 NPM 的用法。
專案初始化
NPM 是 Node.js 套件管理程式,其指令為 npm
。在命令列執行以下指令:
$ cd path/to/project
$ npm init
這時候 npm
會詢問我們數個問題:
package name: (myapp)
version: (1.0.0)
description: A demo app
entry point: (index.js)
test command:
git repository:
keywords:
author: Michelle Chen
license: (ISC)
最後會再確認一次:
{
"name": "myapp",
"version": "1.0.0",
"description": "A demo app",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Michelle Chen",
"license": "ISC"
}
Is this OK? (yes)
在這裡不用擔心答錯,事後修改設定檔並不困難。
經 npm init
初始化後,專案就變成 Node.js 專案。這和原本的專案類型並不衝突,只是多加幾個額外的設定檔。我們下一小節會介紹專案的組成。
Node.js 專案
典型的 Node.js 專案會有以下設定檔:
- package.json
- package-lock.json
- node_modules
Node.js 專案設定檔可和其他語言的設定檔共存,因為 NPM 不會去讀取其他語言的設定檔,反之亦然。我們有時候會在一些 GitHub 上的專案中看到數種工具的設定檔混雜在一起,這只是該專案剛好用到比較多的工具,實不足為懼。如果我們之後不再需要 Node.js 相關工具,把這三個檔案或目錄移除即可,Node.js 專案不會在系統的機碼內偷寫入東西,算是綠色軟體。
package.json 是 Node.js 專案主要設定檔,Node.js 專案的行為會依據此設定檔的內容而定。本文暫不講解 package.json 的細節。如果只是要在專案內使用 Node.js 套件,而非開發新的 Node.js 套件,不需過度在意 package.json 的細節。
package-lock.json 的目的在鎖定專案所用的 Node.js 套件版本,當我們把專案移到別的主機上時,可依據 package.json 和本設定檔快速地回復一致的環境。如果不想鎖住 Node.js 套件的版本,把此設定檔移除即可。
node_modules 保存局部安裝的 Node.js 套件。在一般的開發環境中,Node.js 套件隨時可從網路上下載,此外,在此目錄中的內容物有可能被 NPM 更動,故不需刻意保存此目錄內的內容物。
如果有用 Git 或其他版本控制軟體管理專案,這三個檔案或目錄的管理方式如下:
- package.json :保留
- package-lock.json :視需要保留或忽略
- node_modules :忽略
安裝套件
NPM 安裝套件的方式分為局部安裝 (local installation) 和全域安裝 (global installation) 兩種,前者會安裝到專案內的 node_modules 目錄,後者會安裝到特定的目錄上 (隨系統而相異)。
以下指令用全域安裝安裝 Sass (CSS 前置處理器):
$ npm install --global sass
之後就可以在命令列使用 sass
指令。
以下指令用局部安裝安裝 Babel 並將其存在開發期相依套件清單中:
$ npm install --save-dev @babel/core @babel/cli @babel/preset-env
局部安裝後,無法直接使用該程式,要透過 npm run
間接呼叫相關的命令列工具或是使用其 API;每個工具的用法相異,需查閱該工具的官方網站。
NPM 套件的相依性分為:
- 程式上線時需要的套件,安裝時搭配
--save
參數 - 開發期間需要的套件,安裝時搭配
--save-dev
參數
以上例來說,Babel 的用途是將 ES6+ 的 JavaScript 程式碼轉為等效的 ES5 程式碼,這個動作僅在開發時期需要,故用 --save-dev
來安裝套件。
移除套件
以下指令從全域移除 Sass 套件:
$ npm uninstall --global sass
之後就無法使用 sass
指令。
以下指令從局部移除 Babel 並將其從開發時期相依套件清單中移出:
$ npm uninstall --save-dev @babel/core @babel/cli @babel/preset-env
搜尋套件
NPM 官網 就有搜尋欄可用來尋找套件;不過,還是把用途搭 npm
為關鍵字去 Google 或其他搜尋引擎找比較快,像是以 javascript minify npm
為關鍵字就可以找到數個可用的 Node.js 套件 (參考這裡)。有時一些網頁程式開發者的部落格也會介紹一些實用的 Node.js 套件 (像是這裡)。這些套件的目的是輔助我們開發程式,因此,不需要盲目地找一堆套件來用,依照自己的用途來找尋相關套件即可。
選擇套件版本
理想上,NPM 的套件版本遵守 SemVer (semantic versioning) 的模式,將版本分為 x.y.z (major.minor.patch):
- x (major):和前一版本不相容的大更新
- y (minor):和前一版本相容,加入新特性
- z (patch):和前一版本相容,修復錯誤,未加入新特性
假設我們安裝某個套件時,套件的版本是 1.0.4 :
- 2.0.0 :大更新的版本
- 1.1.0 :加入新特性的小更新
- 1.0.6 :修復錯誤的小更新
在 package.json 中,可按照以下策略決定更新的幅度:
- * :不限制版本向上更新
- ^1.0.4 :在同一版本內的更新
- ~1.0.4 :僅修復錯誤,不加入新特性
SemVer 是一個定義版本號的模式,但不是硬性規定,實際上每個套件不一定都會完全遵守,當作參考指標就好。