我們前面簡單實做了SPA的基本範例,透過建立一個HTML就可以做出多頁的內容,希望藉此讓大家了解SPA的架構和原理,接下來我們會使用Node使用前端開發,搭配NPM與模組化來進行,以下就來介紹Node的套件管理工具。
記得以前使用一些JQuery套件時,除了透過CDN掛載外部連結使用,也可以前往官網下載檔案,將程式放在專案的某處。簡單的專案這樣做不是什麼問題,但若是較複雜的專案,肯定用到不少套件,如此很難做管理,一來每個套件都會出不同的版本,有新版本要更新得重新下載,光是這點就很頭大,哪記得下載了什麼套件需要更新@@;二來我們無法有系統地得知所有套件實際資訊,除非有另外管理,否則還是得一個個點開資料夾去尋找,才知道到底下載什麼檔案,NPM就是來幫助我們管理用到的套件,還能透過指令執行操作。
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.安裝時不需額外特別設定,使用下一步大法即可。
本系列裝使用windows環境做示範,我們先打開命令提示字元,使用win鍵+R快速打開執行視窗,輸入cmd:
進入後我們可以試試查看剛剛安裝node的版本,查看版本的指令為node -v,可以看到我們剛安裝的版本編號。我們試試進入node的環境,執行node命令後,可以看到以下畫面:
然後我們試試輸入一段簡單的Javscript來測試一下:
以上是基本的介紹,接著我們將開始介紹NPM。
我們先建立一個新的空資料夾,開啟編輯器(本系列使用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)
這邊來說說幾個重要的地方
如果不知道要打什麼沒關係,基本上只要一直enter就好
以上完成後會在目錄看到一個package.json檔案,這個檔案存放專案的一些資訊、其中也包含開發與發布用到的套件等,以便我們追蹤使用到的套件與版本,差不多到這邊我們初步完成專案設置了。
先來做個簡單的套件安裝指令操作,我們到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視窗,成功!
今天對Node簡單做個介紹,讓大家了解基本的操作方式,之後我們也會用Node搭配NPM,進行前端SPA的開發,若有興趣了解更多可以參考以下推薦閱讀,我們明天見!
推薦閱讀: