前言
Node.js 對於程式人的意義是一個獨立於瀏覽器外的 JavaScript 開發和運行環境。在 Node.js 問世後,JavaScript 成為實質的通用型語言,不再受限於瀏覽器。
除了用 Node.js 寫網頁程式外,我們也可以使用以 Node.js 為基礎的開發工具。由於網頁程式是獨立在語言外的,這些開發工具可用在其他語言的網頁程式專案上。
安裝 Node.js
安裝 Node.js 不代表我們要以 Node.js 撰寫網頁程式,即使我們使用其他語言來撰寫網頁程式,也可以使用以 Node.js 套件形式發佈的網頁程式相關工具來改善我們的開發流程;目前網頁程式開發工具最豐富的運行環境仍是 Node.js。另外,透過 Node.js 也可在不使用瀏覽器的前提下練習 JavaScript 語法。
Windows 平台使用者使用官網的安裝程式來安裝,建議安裝 LTS (長期支援版) 的版本即可,不需要追新的特性。這部分請讀者自行完成。
macOS 使用者建議使用 Homebrew 來安裝:
$ brew install node
類 Unix 系統的使用者建議用 nvm 來安裝:
$ nvm install --lts
支援 JavaScript 的編輯器或 IDE
JavaScript 算是主流語言,許多編輯器皆支援。以下列出一些常見的選項:
- Atom
- Brackets
- Sumblime Text
- Visual Studio Code (VS Code)
- Nodepad++ (限 Windows)
- WebStorm (商業軟體)
- BlueGriffon (商業軟體,可免費使用)
選擇編輯器是比較個人化的事情,建議讀者實際下載來把玩一下,選自己順手的工具即可。
筆者目前使用 VS Code,因為這套編輯器泛用性好、插件多、跨平台,不用重覆學習新的編輯器。讀者也可自行嘗試其他工具。
選擇目標瀏覽器
除非打定主意只寫後端程式或是網頁 API,我們也需要瀏覽器來執行我們的程式碼。此外,瀏覽器也是網頁前端程式碼實際發佈的目標。
理想上,網頁是標準化的技術,但瀏覽器在實作時多多少少會有不相容的情形,最好還是要針對主流瀏覽器去測試。根據市占率來看,主流的瀏覽器如下:
- Chrome
- Safari (限 Mac)
- Firefox
- Edge (限 Windows)
開發早期不用每個瀏覽器都跑,先用 Chrome 來跑程式即可,後期再依需求在其他瀏覽器上測試,因為 Chrome 在 HTML5 的跑分上是最好的,而且 Chrome 的市佔率也最高。
要不要特地測 Safari 和 Edge?雖然這兩個瀏覽器僅限單一系統,由於這些瀏覽器仍有一定使用人口,如果想長期寫網頁程式,最好還是要測一下比較好。
對於不常用的平台可以買相對平價的機種,像是 Mac mini 或 Macbook Air 等。如果平常都只用單一系統寫程式,買實體機器仍稍嫌浪費。替代的方式是租用雲端瀏覽器測試 (browser testing) 軟體,可以用相對低廉的價格測到多種平台的多種瀏覽器,會比購買實體的電腦主機划算。
要不要針對 Internet Explorer (IE) 去測試網頁相容性呢?由於 IE 算是舊軟體 (legacy software),很多 HTML5 後的新技術都不支援,除非專案有需要,建議直接忽略,尤其是低版本的 IE,算是開發人員的惡夢。
如果在寫網頁程式時,會用到一些 HTML5 和 CSS3 的新特性,可以到 Can I Use 查詢該項特性是否可正常運作。若無法正常運作,也不要馬上放棄,可以試著找找相關的 polyfill。
(選擇性) 用 Selenium 等軟體將測試流程自動化
Selenium 是將原本以手動操作網頁的過程自動化的軟體,可用來測試網頁是否正確運作。一開始先用手動測試網頁程式無妨,等到網頁程式有點規模後,就可以把一些制式的測試動作轉用 Selenium 來自動化。Selenium 支援多種語言的綁定 (binding),包括給 Node.js 用的套件。
如果習慣寫 Node.js 的讀者,也可以用 puppeteer 來取代 Selenium。puppeteer 直接使用 Chrome Node API 來操作 Chrome。對 Node.js 程式設計師來說,會比 Selenium 更方便一些。
(選擇性) 用 HTTP 客戶端程式 (HTTP Client) 和網頁程式互動
瀏覽器本身只能使用 GET 這個 HTTP 行動。但對於 Web API 來說,時常會用其他的 HTTP 行動做為其界面的一部分。這時候就可以用 HTTP 客戶端程式和網頁程式進行互動。一些例子包括 cURL、HTTPie 等。
(選擇性) 用 Git 管理程式碼專案
Git 是知名的版本控制軟體,對於團隊協作有相當的幫助。即使對獨立開發者 (indie developer) 來說也有一些好處:
- 用
git push
搭配 GitHub 等網站來做專案的遠端備分 - 用
git pull
在不同主機間同步專案 - 用
git diff
檢查修改的地方 - 用
git branch
寫一些實驗性質的特性,不會影響主程式碼 - 用
git checkout
把不小心寫爛的部分快速回復
還有一些更進階的用法,讀者可自行慢慢挖掘。本文不特別講解 Git。