網頁程式設計教學:建置開發環境

PUBLISHED ON NOV 19, 2018 — WEB
FacebookTwitter LinkedIn LINE Skype EverNote GMail Yahoo Email

    雖然用線上平台來練習很方便,但那是在前期練習小片段的網頁前端程式碼時使用的工具。待熟悉語法後,仍要轉換到實際的開發環境上來寫程式。本文介紹建置網頁程式的開發環境的過程。

    網頁程式所需的工具

    Node.js

    安裝 Node.js 不代表我們要撰寫 Node.js 網頁程式,即使我們使用其他語言來撰寫網頁程式,也可以使用以 Node.js 套件形式發佈的網頁程式相關工具來改善我們的開發流程;另外,透過 Node.js 也可在不使用瀏覽器的前提下練習 JavaScript 語法。目前網頁程式相關工具最豐富的平台仍是 Node.js。

    Windows 平台使用者使用官網的安裝程式來安裝,建議安裝 LTS 版即可,這部分請讀者自行完成。

    Mac 平台使用者建議使用 Homebrew 來安裝:

    $ brew install node
    

    類 Unix 平台的使用者建議用 nvm 來安裝:

    $ nvm install --lts
    

    編輯器或 IDE

    以下列出一些常見的選項:

    • Atom
    • Brackets
    • Sumblime Text
    • Visual Studio Code (VS Code)
    • Nodepad++ (限 Windows)
    • WebStorm (商業軟體)
    • BlueGriffon (商業軟體,可免費使用)

    選擇編輯器是比較個人化的事情,建議讀者實際下載來把玩一下,選自己順手的工具即可。筆者目前使用 VS Code,因為這套編輯器泛用性好、插件新、跨平台,不用重覆學習新的編輯器;讀者也可自行嘗試其他工具。

    瀏覽器

    除非打定主意只寫後端程式或是 web API,我們也需要瀏覽器來執行我們的程式碼。此外,瀏覽器也是網頁前端程式碼實際發佈的目標。理想上,網頁是標準化的技術,但瀏覽器在實作時多多少少會有不相容的情形,最好還是要針對主流瀏覽器去測試。根據市占率來看,主流的瀏覽器如下:

    • Chrome
    • Safari (限 Mac)
    • Firefox
    • Edge (限 Windows)
    • (選擇性) Internet Explorer

    開發早期不用每個瀏覽器都跑,先用 Chrome 來跑程式即可,後期再依需求在其他瀏覽器上測試,因為 Chrome 在 HTML5 的跑分上是最好的,而且 Chrome 的市佔率也最高。要不要特地買 Windows 或 Mac 的主機來測瀏覽器?如果想長期寫網頁程式,最好還是要測一下比較好,對於不常用的平台可以買相對平價的機種,像是 Mac mini 或 Macbook Air 等。如果平常都只用單一系統,只想測瀏覽器相容性,替代的方式是租用線上瀏覽器測試 (browser testing) 軟體,由於可以測到多種平台的多種瀏覽器,會比購買實體的電腦划算。

    要不要針對 Internet Explorer (IE) 去測試網頁相容性呢?由於 IE 算是舊軟體 (legacy software),很多 HTML5 後的新技術都不支援,除非專案有需要,建議直接忽略,尤其是低版本的 IE,算是開發人員的惡夢。

    如果在寫網頁程式時,會用到一些 HTML5 和 CSS3 的新特性,可以到 Can I Use 查詢該項特性是否可正常運作。若無法正常運作,也不要馬上放棄,可以試著找找相關的 polyfill。

    (選擇性) Selenium

    Selenium 是將操作網頁的過程自動化的軟體,也可用來測試網頁是否正確運作。一開始先用手動測試網頁程式無妨,等到網頁程式有點規模後,就可以把一些制式的測試動作轉用 Selenium 來自動化這個過程 (有關 Selenium 可參考這裡)。

    (選擇性) Git

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

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

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

    TAGS: WEB