美思 現代 [JavaScript] 程式設計教學：建置開發環境

由 美思 撰寫。最後修改於西元 2019 年 05 月 05 日
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

使用線上練習平台

如果讀者只是想先學 ECMAScript 6 的核心語法，可以先用一些練上環境來練習，像是 ES6 Console 等，好處是省下早期建置環境的時間；如果要撰寫實用的程式，基本上還是要建置本文所介紹的環境。

選擇目標瀏覽器 (Web Browser)

原本 JavaScript 的運行環境是瀏覽器 (web browser)，我們在練習 JavaScript 語法時是否需要瀏覽器呢？如果只是要練習語法，其實不太需要，因為現在可以透過 Node.js 等軟體在瀏覽器以外的環境運行 JavaScript 程式碼。相對來說，如果要寫網頁程式 (web application)，且有用到網頁前端的部分，還是會用到瀏覽器。

對於網頁前端程式來說，可以把瀏覽器視為程式的發佈平台。當我們在測瀏覽器相容性時，實際上就是在對目標平台做測試。一般來說，應以主流現代瀏覽器 (modern browsers) 為主要目標，包括：

  • Chrome
  • Firefox
  • Safari
  • Edge
  • (優先度低) Opera

在開發早期，只要專注使用 Chrome 或 Firefox 兩者之一即可，不需要每個修改都逐一測試。在程式接近上線時，再測其他現代瀏覽器即可。至於 Internet Explorer (IE) 呢？由於 IE 算舊軟體了，除非客戶有要求，不用浪費時間在 IE 相容性上。

在測瀏覽器相容性時，不需刻意買實體機器，使用雲端瀏覽器測試 (browser testing) 軟體即可。後者會省下許多金錢，且能達到相同的效果。

使用 Node.js 運行 JavaScript 程式碼

原先 ECMAScript (JavaScript) 運行在瀏覽器中，透過 Node.js 則可以在瀏覽器以外的環境執行 JavaScript 程式碼。雖然我們的目標不是撰寫 Node 程式，但可以拿 Node 環境練習 ECMAScript 語法。Node.js 本身使用 Chrome 的 JavaScript 引擎，除了 API 和套件顯著不同外，語法上是相容的。

即使我們日後不以 Node.js 寫網頁後端，仍有機會用到 Node.js 套件，這是因為有許多和網頁程式相關的工具，像是靜態程式碼檢查 (linter)、壓縮程式碼 (minifier)、程式碼重排 (beautifier) 等，都以 Node.js 套件的形式來發布。以筆者自身為例，筆者更偏好以 Java、C#、Go 語言 (golang) 等靜態型別語言來寫網頁後端，但不時會用到這些 Node.js 所寫成的工具來輔助網頁前端程式的部分。

在 Windows 安裝 Node.js

到 Node.js 官網下載安裝包後自行安裝即可；除非有特殊需求，使用 LTS (long-term support) 版本即可。

在 Mac 安裝 Node.js

如果不需切換 Node.js 版本，使用 Homebrew 安裝即可：

$ brew install node

如果想在多個 Node.js 間切換，可以用 nvm：

$ brew install nvm

使用方式見下文。

在 GNU/Linux 安裝 Node.js

雖然 GNU/Linux 發行版也會提供 Node.js 套件，但由於不同發行版的發行週期相異，很有可能會安裝到較舊的版本。建議用 nvm 安裝，見下文。

用 nvm 管理 Node.js 版本

由於 Node.js 版本更迭快速，使用 nvm 可以簡化重新安裝 Node.js 的過程。原本的 nvm 僅適用於類 Unix 系統，有熱心的開發者開發出適用於 Windows 的 nvm。本文假設讀者在類 Unix 系統下使用 nvm。

可用 curl 安裝 nvm：

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

也可用 wget 安裝 nvm：

$ wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash

nvm 會自動加入以下設定，也可手動搬移到所需的位置：

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

如果沒特殊需求，安裝 LTS 版本即可：

$ nvm install --lts

或者可以列出可得的版本：

$ nvm ls-remote
(省略一些訊息...)

如果安裝多版本，可以在版本間切換，本例將 Node 版本切換到 LTS 版本：

$ nvm use --lts

(選擇性) 建置 C 和 C++ 編譯環境

安裝 C 和 C++ 開發環境主要是為了使用一些 Node 的延伸套件，對於學習 ECMAScript 核心語法和撰寫前端程式幫助較小，讀者可自行選擇是否要安裝。

在 Windows 安裝 C 和 C++ 編譯環境

Windows 對 C 和 C++ 支援較薄弱，需另行安裝且沒有標準方案，筆者先前曾撰文討論過此問題。所幸，Node 社群包好了相關套件，減少手動處理的時間。開啟一個有系統管理者權限的終端機環境，安裝 windows-build-tools 即可：

C:\> npm install --global --production windows-build-tools

在類 Unix 系統安裝 C 和 C++ 編譯環境

使用系統上的 C 和 C++ 編譯環境即可，通常使用 GCC 或 Clang 兩者之一。在 Mac 安裝 Command Line Tools for Xcode 即有 Clang 和其他開發工具。

在 Debian/Ubuntu/Mint 可安裝 build-essential，即包含 GCC 和其他開發工具：

$ sudo apt-get install build-essential

在 Red Hat/CentOS/Fedora 可安裝 "Development Tools" 群組來安裝 GCC 和其他開發工具：

$ sudo yum groupinstall "Development Tools"

選擇編輯器或 IDE

看要寫網頁前端或其他環境，如果在網頁前端中，編輯器要同時支援網頁程式和 JavaScript。現在這種編輯器很多，以下是一些例子：

  • Atom
  • Sublime Text
  • Visual Studio Code (VSCode)
  • Brackets
  • Nodepad++ (限 Windows)
  • WebStorm (商業軟體)

VSCode 是近年來蠻紅的編輯器，支援許多語言，也包括網頁程式。Brackets 則是對撰寫網頁程式有一些強化的特性。筆者目前使用 VSCode，讀者也可以自己試其他的編輯器。