[DAY10]用NPM來加速前端開發

12th鐵人賽 npm node

river_huang

2020-09-24 00:52:47

3344 瀏覽

我們前面簡單實做了SPA的基本範例，透過建立一個HTML就可以做出多頁的內容，希望藉此讓大家了解SPA的架構和原理，接下來我們會使用Node使用前端開發，搭配NPM與模組化來進行，以下就來介紹Node的套件管理工具。

為什麼要使用NPM?

記得以前使用一些JQuery套件時，除了透過CDN掛載外部連結使用，也可以前往官網下載檔案，將程式放在專案的某處。簡單的專案這樣做不是什麼問題，但若是較複雜的專案，肯定用到不少套件，如此很難做管理，一來每個套件都會出不同的版本，有新版本要更新得重新下載，光是這點就很頭大，哪記得下載了什麼套件需要更新@@；二來我們無法有系統地得知所有套件實際資訊，除非有另外管理，否則還是得一個個點開資料夾去尋找，才知道到底下載什麼檔案，NPM就是來幫助我們管理用到的套件，還能透過指令執行操作。

安裝Node

NPM全名為Node Package Manager，是Node開發套件管理工具。在使用NPM之前，我們先了解什麼是Node.js，來看看維基百科怎麼說：

Node.js 是能夠在伺服器端運行 JavaScript 的開放原始碼、跨平台 JavaScript 執行環境。Node.js 由 Node.js Foundation（已與 JS Foundation 合併為 OpenJS Foundation）持有和維護，亦為 Linux 基金會的專案。Node.js採用Google開發的V8執行程式碼，使用事件驅動、非阻塞和非同步輸入輸出模型等技術來提高效能，可最佳化應用程式的傳輸量和規模。這些技術通常用於資料密集的即時應用程式。

Node在伺服器端使用前端的語言Javascript，Node.js使用的是V8引擎，在運作上更具效能，這也是許多高流量承載的網站會選用Node.js做後端環境的原因。

廢話不多說，我們馬上去Node.js官網下載頁面，建議選用左邊LTS版本做下載安裝：

PS.安裝時不需額外特別設定，使用下一步大法即可。

Node基本操作

本系列裝使用windows環境做示範，我們先打開命令提示字元，使用win鍵+R快速打開執行視窗，輸入cmd：

進入後我們可以試試查看剛剛安裝node的版本，查看版本的指令為node -v，可以看到我們剛安裝的版本編號。我們試試進入node的環境，執行node命令後，可以看到以下畫面：

然後我們試試輸入一段簡單的Javscript來測試一下：

以上是基本的介紹，接著我們將開始介紹NPM。

建立Node專案

我們先建立一個新的空資料夾，開啟編輯器(本系列使用VS Code)並進入新建的專案目錄，這邊不急著建立任何檔案，我們打開編輯器內建的終端機，先做專案的初始化設定，輸入以下命令並執行：

npm init

接下來會看到一行一行的設定：

package name: (spa-sample) 
version: (1.0.0)
description: 
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

這邊來說說幾個重要的地方

package name：專案名稱
description：專案描述
version：專案版本
entry point：專案進入點

如果不知道要打什麼沒關係，基本上只要一直enter就好

以上完成後會在目錄看到一個package.json檔案，這個檔案存放專案的一些資訊、其中也包含開發與發布用到的套件等，以便我們追蹤使用到的套件與版本，差不多到這邊我們初步完成專案設置了。

用Node開發

先來做個簡單的套件安裝指令操作，我們到NPM官網找到JQuery套件的頁面，可以看到右側有安裝的指令，終端器輸入指令來使用JQuery套件：

npm install jquery

執行安裝完畢，可以發現在主目錄下多了node_modules的目錄，裡面有剛剛下載的JQuery套件，我們用來引入的JS檔就在jquery/dist/jquery.js。

回去package.json檔案看看，發現在dependencies裡多了JQuery與版本：

這邊的dependencies是相依性套件的意思，也就是當你執行npm install時，會在這邊列出使用的套件。接下來我們建立index.html，在body裡製作一個按鈕並引入JQuery，監聽點擊按鈕的事件，當按下時會彈出alert視窗：

<body>
    <button>click me!</button>

    <!-- 引入JQuery -->
    <script src="/node_modules/jquery/dist/jquery.js"></script>

    <script>
      //按鈕click事件
      $("button").click(function () {
        alert("click");
      });
    </script>
</body>

接著我們用live server開啟index.html，按下按鈕跳出alert視窗，成功!