ES6 環境配置

1. 前言

前面我們對 ES6 進行了介紹，本章來介紹一下配置 ES6 的執行環境，用于學習 ES6。

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

2. 運行環境

2.1 瀏覽器環境

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

2.2 VS Code 中運行

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

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

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

brew install node

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

2.3 Babel

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

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

3. 小結

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