iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 10
0
自我挑戰組

不用前端框架 手把手打造基礎SPA網站系列 第 10

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

  • 分享至 

  • xImage
  •  

我們前面簡單實做了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視窗,成功!

今日小結

今天對Node簡單做個介紹,讓大家了解基本的操作方式,之後我們也會用Node搭配NPM,進行前端SPA的開發,若有興趣了解更多可以參考以下推薦閱讀,我們明天見!

推薦閱讀:

  1. Node.js 是什麼?跟 JavaScript 有什麼關係
  2. JavaScript深入浅出第4课:V8引擎是如何工作的?

上一篇
[DAY09]小試身手-使用hash做出SPA
下一篇
[DAY11]Webpack自動化打包工具
系列文
不用前端框架 手把手打造基礎SPA網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言