如果讀者只是想先學 ECMAScript 6 的核心語法,可以先用一些練上環境來練習,像是 ES6 Console 等,好處是省下早期建置環境的時間;如果要撰寫實用的程式,基本上還是要建置本文所介紹的環境。
原本 JavaScript 的運行環境是瀏覽器 (web browser),我們在練習 JavaScript 語法時是否需要瀏覽器呢?如果只是要練習語法,其實不太需要,因為現在可以透過 Node.js 等軟體在瀏覽器以外的環境運行 JavaScript 程式碼。相對來說,如果要寫網頁程式 (web application),且有用到網頁前端的部分,還是會用到瀏覽器。
對於網頁前端程式來說,可以把瀏覽器視為程式的發佈平台。當我們在測瀏覽器相容性時,實際上就是在對目標平台做測試。一般來說,應以主流現代瀏覽器 (modern browsers) 為主要目標,包括:
在開發早期,只要專注使用 Chrome 或 Firefox 兩者之一即可,不需要每個修改都逐一測試。在程式接近上線時,再測其他現代瀏覽器即可。至於 Internet Explorer (IE) 呢?由於 IE 算舊軟體了,除非客戶有要求,不用浪費時間在 IE 相容性上。
在測瀏覽器相容性時,不需刻意買實體機器,使用雲端瀏覽器測試 (browser testing) 軟體即可。後者會省下許多金錢,且能達到相同的效果。
原先 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 所寫成的工具來輔助網頁前端程式的部分。
到 Node.js 官網下載安裝包後自行安裝即可;除非有特殊需求,使用 LTS (long-term support) 版本即可。
如果不需切換 Node.js 版本,使用 Homebrew 安裝即可:
$ brew install node
如果想在多個 Node.js 間切換,可以用 nvm:
$ brew install nvm
使用方式見下文。
雖然 GNU/Linux 發行版也會提供 Node.js 套件,但由於不同發行版的發行週期相異,很有可能會安裝到較舊的版本。建議用 nvm 安裝,見下文。
由於 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++ 開發環境主要是為了使用一些 Node 的延伸套件,對於學習 ECMAScript 核心語法和撰寫前端程式幫助較小,讀者可自行選擇是否要安裝。
Windows 對 C 和 C++ 支援較薄弱,需另行安裝且沒有標準方案,筆者先前曾撰文討論過此問題。所幸,Node 社群包好了相關套件,減少手動處理的時間。開啟一個有系統管理者權限的終端機環境,安裝 windows-build-tools
即可:
C:\> npm install --global --production windows-build-tools
使用系統上的 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"
看要寫網頁前端或其他環境,如果在網頁前端中,編輯器要同時支援網頁程式和 JavaScript。現在這種編輯器很多,以下是一些例子:
VSCode 是近年來蠻紅的編輯器,支援許多語言,也包括網頁程式。Brackets 則是對撰寫網頁程式有一些強化的特性。筆者目前使用 VSCode,讀者也可以自己試其他的編輯器。