美思 [Node.js] 程式設計教學:建置網頁程式所需的開發環境

Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

前言

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 客戶端程式和網頁程式進行互動。一些例子包括 cURLHTTPie 等。

(選擇性) 用 Git 管理程式碼專案

Git 是知名的版本控制軟體,對於團隊協作有相當的幫助。即使對獨立開發者 (indie developer) 來說也有一些好處:

  • git push 搭配 GitHub 等網站來做專案的遠端備分
  • git pull 在不同主機間同步專案
  • git diff 檢查修改的地方
  • git branch 寫一些實驗性質的特性,不會影響主程式碼
  • git checkout 把不小心寫爛的部分快速回復

還有一些更進階的用法,讀者可自行慢慢挖掘。本文不特別講解 Git。

關於作者

身為資訊領域碩士,美思認為開發應用程式的目的是為社會帶來價值。如果在這個過程中該軟體能成為永續經營的項目,那就是開發者和使用者雙贏的局面。

美思喜歡用開源技術來解決各式各樣的問題,但必要時對專有技術也不排斥。閒暇之餘,美思將所學寫成文章,放在這個網站上和大家分享。