網頁程式設計教學:使用 NPM 管理前端專案

PUBLISHED ON NOV 20, 2018 — WEB

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

    TAGS: WEB