前言
本文根據現代前端實務，說明建置開發環境的流程與建議。
選擇目標瀏覽器
原本 JavaScript 的運行環境是瀏覽器 (Web Browser)，那我們在練習語法時是否一定需要瀏覽器呢？如果只是單純練習語法，其實不一定需要，因為現在可以透過 Node.js 等運行環境直接執行 JavaScript 程式碼。相對來說，如果要開發網頁程式 (Web Application)，且涉及前端介面的部分，瀏覽器仍是不可或缺的工具。
對於前端程式來說，可以把瀏覽器視為程式的「發佈平台」。當我們在測試瀏覽器相容性時，實際上就是在對目標平台做測試。一般來說，應以「現代瀏覽器 (Modern Browsers)」為主要目標，包括：
- Chrome：目前的主流瀏覽器。除了 Chrome 本身，也包括許多以 Chromium 為基礎的瀏覽器（如 Edge、Brave）。
- Firefox：另一個主要瀏覽器，雖然市占率受多方因素影響有所下滑，但在開發者社群中仍具代表性。
- Safari：macOS 與 iOS 生態系專屬的瀏覽器。
在開發早期，專注於使用 Chrome 即可，不需要每項修改都逐一測試。待程式接近完成或上線前，再測試 Firefox 即可；至於 Safari，若手邊有 Mac 設備再進行測試。至於 Internet Explorer (IE)，由於微軟已正式停止支援，除非客戶有特殊要求，否則不建議再浪費時間在 IE 的相容性上。
在測試相容性時，不需刻意購買各類實體機器，可利用雲端瀏覽器測試 (Browser Testing) 服務。這類工具能省下大量設備成本，並達到精確的測試效果。
JavaScript 運行環境
目前主要的 JavaScript 運行環境有三個：
- Node.js：最主流的運行環境，絕大多數的公開函式庫與開發工具都以此為基準。
- Deno：原生的 TypeScript 運行環境。目前主要定位於 Edge Function 或特定後端場景。
- Bun：主打高速運行的 TypeScript 運行環境。適合內部開發工具使用，但作為預設發佈環境尚待市場驗證。
原先 JavaScript 僅運行在瀏覽器中，透過 Node.js 則可以在瀏覽器以外的環境執行程式碼。雖然我們的目標不一定是撰寫 Node.js 後端程式，但可以利用 Node 環境來練習語法。Node.js 本身使用 Chrome 的 V8 引擎，除了提供的 API 不同外，核心語法與瀏覽器是高度相容的。
即使日後不寫後端，前端開發仍會頻繁用到 Node.js，因為現代前端工具鏈——如靜態程式碼檢查 (Linter)、程式碼壓縮 (Minifier)、格式化工具 (Prettier) 等，幾乎都是以 Node.js 套件的形式發布。
在 Windows 安裝 Node.js
到 Node.js 官網下載安裝包後自行安裝即可；除非有特殊版本需求，建議選擇 LTS (Long-term Support) 版本以求穩定。
在 Mac 安裝 Node.js
如果不需頻繁切換版本，使用 Homebrew 安裝即可：
$ brew install node如果想在多個 Node.js 版本間切換，建議使用 nvm：
$ brew install nvm在 GNU/Linux 安裝 Node.js
雖然各大發行版官方倉庫都有提供 Node.js，但由於發行週期相異，往往版本較舊。強烈建議使用 nvm 安裝，以確保能獲取最新的穩定版。
用 nvm 管理 Node.js 版本
由於 Node.js 版本更迭快速，使用 nvm 可以大幅簡化管理流程。原本的 nvm 僅適用於類 Unix 系統，而 Windows 使用者則可以選擇 nvm-windows。以下說明以類 Unix 系統為主。
可用 curl 安裝 nvm：
$ curl -o- https://githubusercontent.com | bash或使用 wget：
$ wget -qO- https://githubusercontent.com | bash安裝後，nvm 會在設定檔中加入以下內容，你也可以手動搬移至 .zshrc 或 .bashrc：
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm接著建議安裝 LTS 版本：
$ nvm install --lts若要查詢所有可安裝的版本：
$ nvm ls-remote安裝多版本後，可以視需求隨時切換：
$ nvm use --lts(選擇性) 建置 C 和 C++ 編譯環境
安裝 C/C++ 開發環境主要是為了編譯部分 Node.js 的原生擴充套件（Native Modules）。對於初學者或僅撰寫純前端程式的人來說，這不是必備的，可根據個人需求決定是否安裝。
在 Windows 安裝 C 和 C++ 編譯環境
以往 Windows 安裝編譯環境較為繁瑣，雖然過去有 windows-build-tools 腳本，但現在最標準的做法是安裝 Visual Studio Build Tools，並在安裝時勾選「使用 C++ 的桌面開發」。
在類 Unix 系統安裝 C 和 C++ 編譯環境
直接使用系統內建或官方提供的開發者工具即可。在 macOS 上，只要安裝 Command Line Tools for Xcode 即可獲得 Clang 與相關工具。
在 Debian/Ubuntu/Mint 執行：
$ sudo apt-get install build-essential在 Red Hat/CentOS/Fedora 則安裝開發者工具群組：
$ $ sudo dnf groupinstall "Development Tools"選擇編輯器或 IDE
在前端開發中，編輯器需要同時對 HTML、CSS 與 JavaScript 有良好的支援。目前這類工具非常豐富，其中 VS Code (Visual Studio Code) 是目前最受歡迎且功能最強大的首選，擁有龐大的外掛生態系。
過去常見的 Brackets 已逐漸淡出市場。若沒有特殊偏好，強烈建議直接使用 VS Code 作為你的主要開發工具。