ES6 環(huán)境配置

1. 前言

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

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

2. 運(yùn)行環(huán)境

2.1 瀏覽器環(huán)境

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

2.2 VS Code 中運(yùn)行

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

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

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

brew install node

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

2.3 Babel

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

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

3. 小結(jié)

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