開放原始碼技術文件網 建置網頁程式所需的開發環境

最後修改日期為 JUN 2, 2019

前言

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。

分享本文
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Yahoo
追蹤本站
Facebook Facebook Twitter