前端網頁開發須知，NPM、Parcel、React、Router、Redux、Axios、Bootstrap與其他工具簡介

前端網頁開發通常包含HTML、CSS、JavaScript，可是單靠三者從頭打造一個現代網頁容易重複發明輪子，自己發明的輪子還可能跟別人車子不合用，因此有許多套件可以減輕開發工作，最後還需要一個打包工具將套件與網頁打包起來，成為可以放上伺服器的產品，本文以React為例依序介紹一些常用的工具，希望在實際開始學習之前先通過本篇簡介進行初步的理解，那麼實際開始學習時就能更加快速進入狀況。

我也有寫另一篇文章：一個腳本快速使用Parcel建立React、Router、Redux、Bootstrap立刻進行前端網頁開發，提供快速配置資料夾與檔案，迅速開始開發的方法。

網頁開發三大基礎

HTML與CSS

前端網頁分為三大區塊，分別是HTML、CSS與JavaScript。其中HTML掌管網頁結構與內容，CSS掌管網頁呈現出來的樣式，例如HTML紀錄網頁有導覽列、標題列、內文的相對位置與內容，而CSS則決定導覽列、標題列、內文的實際位置與樣式，近年的CSS還可以產生動畫效果。

JavaScript

在最陽春的情況下，只要有HTML就可以有一個能傳達訊息的網頁了，加上CSS就可以有一個美觀的網頁。HTML是一種標記語言，CSS是樣式表，兩者讓網頁瀏覽器（例如Chrome、FireFox、Safari）知道該怎麼讓渲染引擎產生出網頁內容，而JavaScript的是一種程式語言，而JavaScript則是添增了更多可能性，以下介紹的許多套件通常也是由JavaScript開發，提供給JavaScript使用的套件。

NPM簡介

NPM是Node Package Manager的簡稱，直譯為Node套件管理器，提供與管理NodeJS的套件。在傳統MVC開發時，許多的JavaScript套件都需要從HTML裡面載入，例如<script src="jquery.min.js"></script>這樣的語句。載入的數量多的時候需要寫一堆script標籤，不同script的載入可能會有順序的問題，載入不同版本的JavaScript套件時還可能對另一個套件發生版本衝突，因此透過NPM可以解決很多麻煩事情。

npm init     # 初始化專案，會建立package.json檔案
npm install  # 安裝全部需要的套件，需要安裝什麼寫在package.json檔案內
             # 通常出現奇怪的錯誤時，將node_module資料夾刪除，再執行這個指令重新安裝套件會有用
npm i {name}         # 安裝指定套件（使用i或install都可以），套件名稱會自動寫入package.json檔案
npm i -D {name}      # 安裝指定套件，但只用於開發，打包時會排除
npm uninstall {name} # 移除指定套件，套件名稱會自動package.json檔案移除
npm start      # 啟動NodeJS伺服器執行專案
npm run {name} # 執行腳本，例如 run build 通常代表打包專案
               # 具體有哪些腳本寫在package.json檔案內，可以自行新增

Parcel簡介

npm i -D parcel

使用NPM進行套件管理之後，輸出成要實際使用的網頁需要經過打包，通常打包的過程會有一些特定的需求。在以前使用Webpack進行打包，需要重複設定許多設定，比如要指定哪些資料夾與檔案要被打包、將SCSS解析為CSS、將CSS與JavaScript程式碼最佳化、增加Hash數值避免瀏覽器快取影響重新整理、壓縮圖片等，更進階的還有協助管理Service Worker和manifest.webmanifest等功能（有機會來寫一篇教學）。以上每個功能都需要個別設定，甚至需要另外下載一些NPM套件來協助設置，增加許多開發初期的麻煩。因此出現了新的打包工具Parcel，主打零配置的網頁打包工具，需要比較客製化的需求也只需要新增一點點設定工作而已，比起使用Webpack會省下許多時間。

需要注意，平常NPM的套件會有一個程式進入點，寫在package.json檔案內。但是Parcel的程式進入點是index.html，然後由Parcel自己判斷有哪些Script與CSS，所以要把package.json檔案內的 "main": "index.js," 這行文字刪除。而搜尋Parcel的資料時要注意是第一版還是第二版的，目前透過指令 npm i -D parcel 安裝的時候是安裝第二版的Parcel。在NPM上安裝的套件不指定版本時都是安裝最新的穩定版。

補充：JavaScript程式碼最佳化通常包含去掉多餘的空白、換行、註解、簡化變數名稱等工作。

React簡介

npm i react react-dom

React是由Facebook開發的前端網頁套件，雖然官方自稱是個Library，但我覺得稱為Framework（框架）也不為過。

目前前端三大框架（套件）分別是Google開發的Angular、Facebook開發的React、前Google工程師與社群開發的Vue.js，三者都有不少使用者。最一開始我是使用AngularJS，但後來Google將AngularJS的語言從JavaScript換成TypeScript語言，並且將AngularJS 2更名成Angular 2，做了大量不相容舊版的更新，因此我就改用React了。

前陣子看討論發現很多人放棄Angular的原因跟我一樣，但目前Angular從2到14都沒再發生將整個架構大改，導致程式碼完全不相容的狀況，因此目前使用Angular開發應該也是不錯的選擇。

而React使用比較彈性的方法更新，每次升級跟舊版不會差別太大。例如React 18新增了 ReactDOM.createRoot 來取代原本的建立Root節點的方法，可是在React 18使用舊方法時依然能運作，只是會在Conole多出警告要開發者要找時間更新。又或者React從16、17開始改成Function base的設計，雖然新功能都著重在Function base上，但依然保留Class base的模式可以正常運作。React也支援TypeScript，或是透過Visual Studio Code的JSDoc功能也在JavaScript模式下進行型別檢查，在開發時保留許多彈性。

講完React的優點，最後提一下React的缺點，就是React的許多功能是分開來的，可能是由React的開發團隊另外提供，也可能是第三方開發社群提供。因此同一個功能有時候會有好幾種解決方法，不同團隊或是不同時期開發的專案使用的工具可能會不太一樣。

React相關的工具簡介

React Router DOM

npm i react-router-dom

使用React或是另外兩個框架開發的網頁常常是單頁式應用程式（Single Page Application, SPA, 可參考維基百科）形式的，簡單介紹就是網站實際上只有一頁HTML，網站上不同頁面都是透過JavaScript動態產生的，使用者點選的超連結不是真的讓瀏覽器切換頁面，而是讓JavaScript切換頁面內容。好處是不會產生跳頁時的閃爍、前後端可以完全分離、換頁的載入速度更快速舒適、透過這種前端渲染技術也能降低伺服器的流量。這時候需要有前端路由功能來管理不同的虛擬頁面，React Router是個好選擇。

React Redux

npm i react-redux

Redux是React團隊提出的一種概念，這需要講解到React如何處理資料，在目前的簡介中只會先簡單的介紹它。簡單講Redux是管理React上的各種共用資料的套件，包含不同虛擬頁面上要共用的資料，以及後端伺服器傳過來的資料。

Redux會管理資料的儲存，當資料更新時會通知React頁面或區塊更新內容。React上的程式也可以主動呼叫Redux將資料新增、刪除、修改，完成後Redux又會將新版的資料自動推送給使用到相關資料的頁面或區塊。這是Redux取代單向綁定與雙向綁定等功能的方法。

值得注意的是React一開始只是提出Redux概念，因此需要另外安裝React Redux套件，但後來React本身提供了useContext + useReducer 兩個新功能，在比較簡易的需求中也可以考慮使用內建的，但更複雜的情況下我覺得React Redux還是比較好管理，因為下一章節要介紹方便React Redux使用的Tookit。

ReduxJS Toolkit

npm i @reduxjs/toolkit

使用React Redux的時候，需要建立store和一些相關的程式，Toolkit可以減少相關的工作。首先要有初始資料、要有Reducer處理資料、要有Action定義可以進行的操作、要有Thunk處理非同步的狀態，透過ReduxJS Toolkit可以一口氣定義好，透過一個Slice工具自動幫開發者拆出各個部分，簡化開發流程。

React Bootstrap

npm i react-bootstrap

Bootstrap是下一章節會介紹到的頁面設計套件，分為CSS與JavaScript兩個部分，React Bootstrap可以幫忙將Bootstrap融入React。基本上跟CSS相關的部分我還是習慣使用傳統方式操控Bootstrap，只是有一些需要使用到Bootstrap的JavaScript協助控制的功能，像是彈出式的Modal，這部分我會使用React Bootstrap提供的整合React的Bootstrap Modal。

其他相關工具

Bootstrap

npm i bootstrap

@import "../node_modules/bootstrap/scss/bootstrap";

Bootstrap是由Twitter開發的前端樣式套件，首先他提供一種方便的排版方案，可以簡便的開發出RWD的網頁，讓網頁能配合不同螢幕尺寸來改變網頁樣式。再來他提供一致的樣式，定義出primary、success、secondary、info、warning、danger各種情境該有的方格，讓網頁上的表格、按鈕、文字、背景等都有一致風格。然後提供各種額外套件，可以有漂亮的表格、表單、區塊、圖片、導覽列…等。

透過SASS/SCSS載入使用的話，可以再載入之前先設定變數名稱，來修改你需要的尺寸、顏色等各種設定，可以克制出你需要的、與眾不同的Bootstrap主題。

Bootstrap Icons

npm i bootstrap-icons

import 'bootstrap-icons/font/bootstrap-icons.css'

Bootstrap Icons是由Bootstrap提供的各種Icons，可以參考他們的網站 https://icons.getbootstrap.com/ ，這些icon使用向量繪製，因此放大縮小使用都不會失真，真是既佛心又好用。

Axios

npm i axios

import axios from 'axios'

Axios是提供JavaScript直接與後端伺服器交換資料的工具，也就是常聽到的AJAX。在最早以前需要AJAX必須透過JavaScript內建的XMLHttpRequest，使用起來相當不便，後來出現JQuery這個第三方套件，裡面的$.ajax將AJAX流程簡化許多。現代使用AJAX時通常會使用JavaScript新內建的Fetch API，如果需要更多額外功能，就會使用Axios。

我個人習慣使用Axios，他可以提供AJAX發起前的預處理、AJAX完畢前的預處理，然後可以建立許多Axios的instance針對不同需求建立好幾種預處理方式和設定值。

Sweet Alert

npm i sweetalert2

import Swal from 'sweetalert2'

在JavaScript中提供alert、confirm與prompt等方法，可以在網頁上跳出小型視窗，用來提示使用者否些訊息，或是詢問使用者確認或取消，也可以要求使用者輸入一些訊息。但會有三個問題，第一個是這三個方法都是彈出瀏覽器原生的視窗，樣式通常很死板。第二個是進行詢問的時候JavaScript引擎往往會停止運作，直到小視窗關閉。第三個是這些小視窗是瀏覽器本身提供的，因此有一些In-App瀏覽器無法使用這些小型視窗，造成網頁根本無法提示、詢問使用者。

使用Sweet Alert可以解決這些問題，他提供漂亮的介面，而且使用的是HTML在網頁上產生重疊的內容，不用擔心一些In-App瀏覽器不提供alert、confirm與prompt等方法。其他有趣功能可以參考官網介紹：https://sweetalert2.github.io/。

Moment

npm i moment

import moment from 'moment'

Moment是個優秀的時間處理套件，可以輸入文字、Unix Timestamp等各種內容，Moment會解析成Date物件。也可以將Date物件解析成人類閱讀的文字，也支援i18n可以處理多國語言。以下直接用一些程式範例來講解他的好用。其他方便的功能可以到官方網站觀看介紹：https://momentjs.com/。

moment()                      // OK，建立當前日期
moment("2020-10-01")          // OK
moment("2020-10-01 08:00:00") // OK
moment("1 jan 22")            // OK
moment("1 Jan 2022")          // OK
moment(1659282975000)         // OK，但必須使用毫秒為單位

moment("2020-10-01").fromNow()          // 輸出：2 years ago
moment("2020-10-01").format("Y/MM/DD")  // 輸出：2020/10/01
moment().add(-1, 'days').fromNow()      // 輸出：a day ago

Animate.css

可以提供許多有趣的動畫效果，可以參考官方網站：https://animate.style/，有機會介紹如何使用React寫一個自動控制Animate.css的工具，可以順便理解React的Hook工作原理。

逐漸功成身退的工具

JQuery

JQuery是早期進行網頁開發常常會出現的JavaScript套件，十年前幾乎每個學習網頁的人都會學習JQuery，導致有些人誤以為JQuery跟JavaScript是兩個獨立的東西，但其實JQuery是使用JavaScript寫出來的JavaScript套件。

以前會需要JQuery有許多因素，例如透過JavaScript操控網頁上的內容時，要尋找網頁上的某個元素會很麻煩，JQuery可以提供像是CSS選擇器一樣的方式來尋找物件。現代的JavaScript已經添加了 document.querySelector 提供一樣的功能，而且使用React、Angular、Vue.js之後已經不太需要用這種方式控制物件了，因此JQuery的選擇器功能漸漸不再被使用。

JQuery還有提供許多動畫特效，但在CSS3開始也加入了許多Animate功能，這種「原生」的方式效能更好，也有透過CSS3開發的Animate.css套件可以提供很多動畫特效，因此JQuery的動畫功能也逐漸不再使用。

還有AJAX的部分，JQuery提供了$.ajax功能，比起早期的XMLHttpRequest來說，$.ajax方便很多，但現代JavaScript內建了Fetch功能，第三方套件也有更便利的Axios，因此許多人也不使用$.ajax了。

JQuery還有很多功能，但許多都跟上面一樣，有了許多更好的代替品，甚至是成為瀏覽器或是JavaScript原生功能，因此需要JQuery的需求變小了。如果只為了一點點JQuery功能就載入JQuery也不划算，因為JQuery的檔案太大了，會影響網頁仔入速度，需要JQuery的情況就更少了，就連Bootstrap也在第五代開始不再使用JQuery。這不代表JQuery不好，如果是開發傳統後端直接輸出的MVC網頁，JQuery還是能提供不少幫助，只是在新的開發方式中漸漸不需要JQuery了。

Post Views: 2,353