ES6 環(huán)境配置

1. 前言

前面我們對 ES6 進行了介紹，本章來介紹一下配置 ES6 的執(zhí)行環(huán)境，用于學(xué)習(xí) ES6。

現(xiàn)在市面上的大部分瀏覽器基本上都已經(jīng)支持 ES6 的絕大部分語法，但是有些語法需要進行轉(zhuǎn)譯，或者在特定的環(huán)境中才能運行。其中 Chrome 和 Firefox 瀏覽器對 ES6 新特性最友好，IE7~11 基本不支持 ES6。

2. 運行環(huán)境

2.1 瀏覽器環(huán)境

我們最終寫的代碼都是在瀏覽器環(huán)境運行的，所以本教材的 ES6 代碼大部分都可以在高級瀏覽器的控制臺中直接進行測試。本教程使用的瀏覽器是 Chrome 瀏覽器。首先我們需要到官網(wǎng)下載并安裝 Chrome 瀏覽器，也可以直接使用百度下載。安裝完后打開瀏覽器，進入瀏覽器的控制臺，在控制臺中就可以學(xué)習(xí) ES6 語法了。具體可以看如下視頻的操作步驟：

2.2 VS Code 中運行

VS Code 是微軟推出的一款很強大的編輯器，它提供了豐富的插件系統(tǒng)，通過使用這些插件，我們就可以很輕松地運行我們的 ES6 代碼。要在 VS Code 中運行 ES6 代碼，需要添加以下幾內(nèi)容：

• 安裝 NodeJS；
• 安裝 VS Code 編輯器；
• 安裝 Code Runner 插件。

首先我們可以在 官網(wǎng) 下載最新的 Node 安裝包，安裝 NodeJS 會附帶 npm 包管理器。Mac 用戶也可以使用 Homebrew 這個工具進行安裝，執(zhí)行命令：

brew install node

安裝完 NodeJS 后需要下載 VS Code 編輯器，可以在 VS Code 官網(wǎng) 下載，下載完直接安裝。安裝完成后我們需要在 VS Code 的插件市場中搜索 Code Runner，這是一個可以運行選中代碼的 VS Code 插件神器，更加方便地查看 ES6 代碼運行出來的結(jié)果，這個插件可以讓我們更加細致地關(guān)注代碼片段的運行情況。具體操作步驟我們可以看如下視頻的演示：

2.3 Babel

babel 是現(xiàn)在市面上使用得最多的一個 JavaScript 編譯器，它可以把 ES6 語法編譯成 ES5 語法，這樣就可以讓 ES6 代碼在不支持 ES6 語法的低版本瀏覽器中運行了。

babel 的官網(wǎng)是一個國外網(wǎng)站，我們可以訪問 國內(nèi)的站點 基本內(nèi)容是一致的，網(wǎng)站還進行了翻譯，更適合國內(nèi)同學(xué)使用。在試一試中我們可以看到 ES6 語法轉(zhuǎn)化為 ES5 后是什么樣的，更加明了地展示語法的編譯過程。

3. 小結(jié)

本節(jié)學(xué)習(xí)了搭建 ES6 的兩個運行環(huán)境，當(dāng)然還可以使用 Webpack 進行搭建，后面在學(xué)習(xí)模塊化和實戰(zhàn)時會使用到，這里我們就使用最簡單的兩種方式來運行我們的 ES6 代碼。本教程的所有代碼實例都是基于瀏覽器和 VS Code 兩個環(huán)境下實現(xiàn)的。而且這兩個環(huán)境配置簡單上手快，讓我們更加關(guān)注 ES6 語法本身。