ES6的出現(xiàn)極大的簡化了JS的開發(fā)，那么問題來了，當(dāng)我們寫了一段ES6的代碼想在瀏覽器上運行時發(fā)現(xiàn)瀏覽器不支持（看不到想要的效果）怎么辦？下面就為大家介紹一下如何搭建一個ES6的運行環(huán)境。

首先需要介紹一下ES6的開發(fā)利器：babel，babel是一個編譯器，負(fù)責(zé)將源代碼轉(zhuǎn)換成指定語法的目標(biāo)代碼，經(jīng)過轉(zhuǎn)換之后我們就可以在瀏覽器中執(zhí)行我們的代碼

babel為我們提供了一個很方便的命令行工具：babel-cli，利用它我們可以在命令行中執(zhí)行編譯命令（將ES6源代碼轉(zhuǎn)換成瀏覽器可以識別運行的普通JS代碼），我們可以使用npm來安裝它，在命令行執(zhí)行：
1-1. npm install babel-cli -g
考慮到不同的項目依賴的版本可能不同，全局的安裝babel-cli不能保證兼容到各個項目，因此我們可以選擇本地安裝babel-cli，則執(zhí)行以下命令：
1-2. npm install babel-cli --save-dev
本地安裝完成后我們可以卸載全局安裝，執(zhí)行以下命令：
1-3. npm uninstal babel-cli -g

安裝babel-cli之后還需要安裝轉(zhuǎn)碼規(guī)則包（如ES6轉(zhuǎn)換成ES5，則需要安裝babel-preset-es2015包）等，為此我們先創(chuàng)建一個小demo用來體驗一下整個安裝和運行過程，首先在你喜歡的磁盤中新建一個babel-test文件夾，在這個文件夾中創(chuàng)建兩個目錄es6和js，分別用來存放ES6源代碼和編譯后的ES5目標(biāo)源代碼，通過命令行cd將目標(biāo)轉(zhuǎn)移到剛才新建的babel-test文件夾下，執(zhí)行以下命令，目的是生成一個默認(rèn)的package.json文件：
2. npm init -yes

然后在當(dāng)前目錄下執(zhí)行下面的命令用來安裝ES6轉(zhuǎn)碼規(guī)則包
3. npm install babel-preset-es2015 -- save-dev

在babel-test/es6文件夾中創(chuàng)建一個test.es6文件用于寫入ES6代碼。由于Babel編譯源文件時沒有過多的限制，所以我們也可以選擇使用js或es作為文件后綴名，代碼如下：
let myName = 'Gao';
let say =Hello ${myName};
console.log(say);

接下來就是運行babel命令來編譯我們的ES6源碼，意思是編譯es6下面的test.es6文件，輸出文件為js目錄下test.js，同時指定編譯規(guī)則包es2015，命令執(zhí)行完成后會在js文件夾下找到一個test.js文件，執(zhí)行命令如下：
4-1. 編譯單個文件：babel es6/test.es6 --out-file js/test.js --presets es2015
4-2. 編譯所有文件：babel es6 --out-dir js --presets es2015
此時我們打開js/test.js文件看到的就是可以直接在瀏覽器上運行的代碼，然而為了簡化編譯時執(zhí)行命令的復(fù)雜程度，我們可以修改package.json文件中的scripts項，如下：
"scripts": {
"compile": "babel es6 --out-dir js --presets es2015"
}
修改完之后我們可以通過執(zhí)行以下簡單的命令來運行這個編譯任務(wù)：
4-3. npm run compile