位元詩人 [Node.js] 程式設計教學:使用 NPM 管理網頁專案

Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

前言

本文會說明如何在專案中引入以 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 是一個定義版本號的模式,但不是硬性規定,實際上每個套件不一定都會完全遵守,當作參考指標就好。

關於作者

身為資訊領域碩士,位元詩人 (ByteBard) 認為開發應用程式的目的是為社會帶來價值。如果在這個過程中該軟體能成為永續經營的項目,那就是開發者和使用者雙贏的局面。

位元詩人喜歡用開源技術來解決各式各樣的問題,但必要時對專有技術也不排斥。閒暇之餘,位元詩人將所學寫成文章,放在這個網站上和大家分享。