使用 Javascript 引擎的系統(tǒng)（如 Node.js）

Node.js 是一個(gè) Javascript 運(yùn)行環(huán)境(runtime)。實(shí)際上它是對(duì) Google V8 引擎進(jìn)行了封裝。
V8 引擎執(zhí)行 Javascript 的速度非?？?，性能非常好。Google Chrome 瀏覽器就是用的 V8 引
擎。
Node.js 下載地址 https://nodejs.org/zh-cn/，目前支持到 97%。

運(yùn)行 ECMAScript6 的途徑

瀏覽器（IE、Firefox、Chrome、Safari、Opera 等）
瀏覽器對(duì) ES6 的支持情況：
http://www.xuebuyuan.com/2122607.html
http://kangax.github.io/compat-table/es6/

可以看出來(lái)，基本上是沒(méi)有瀏覽器完全支持的，所以還是不要直接用的好。
但是有轉(zhuǎn)換器 (更準(zhǔn)確地說(shuō)是源代碼到源代碼的編譯器) 可以把ES6轉(zhuǎn)換為被瀏覽器接受的ES5，比如Babel以及Traceur 之類(lèi)的項(xiàng)目。其中Babel對(duì) ES6 的支持程度比其它同類(lèi)更高，而且 Babel 擁有完善的文檔和一個(gè)很棒的在線交互式編程環(huán)境，因此用的比較多。
Babel 是 ES2015 語(yǔ)法轉(zhuǎn)化器。這些轉(zhuǎn)化器能讓你現(xiàn)在就使用最新的 JavaScript 語(yǔ)法，而不用等待瀏覽器提供支持。
接下來(lái)我們就要使用 Babel 工具將 ECMAScript6 轉(zhuǎn)換為 ECMAScript5啦。

NodeJs 安裝步驟

我們要使用nvm來(lái)安裝node，nvm是一種NodeJs版本管理工具。

（這里需要說(shuō)明一下：nvm是NodeJs版本管理工具，下文中的npm是隨同NodeJS一起安裝的包管理工具,能解決NodeJS代碼部署上的很多問(wèn)題，類(lèi)似于JAVA中的Maven）

Windows操作系統(tǒng)的nvm下載地址https://github.com/coreybutler/nvm-windows/releases

目錄.png

安裝之后，我們打開(kāi)cmd 運(yùn)行 set | findstr "nvm"檢查一下

檢查結(jié)果.png

安裝成功.png

出現(xiàn)上圖所示表示nvm安裝成功。

nvm 配置淘寶鏡像（下載更快）

修改 F:\dev\nvm\settings.txt

修改為.png

8.4.0.png

查詢版本.png

切換新版本.png

接下來(lái)為了使npm更高效，下載更快，我們可以設(shè)置淘寶鏡像。

配置淘寶鏡像.png

配置好之后我們就可以在不同環(huán)境下運(yùn)行ES6了~

在NodeJs環(huán)境中運(yùn)行ES6

打印name.png

OK接下來(lái)我們就要實(shí)現(xiàn)ES6到ES5的轉(zhuǎn)換了！

使用 Babel 完成 ES6 到 ES5 的轉(zhuǎn)換

首先使用 npm 創(chuàng)建一個(gè) NodeJs 工程：

開(kāi)始.png

交互式配置node參數(shù)：

配置參數(shù).png

創(chuàng)建好之后，我們通過(guò)webstorm打開(kāi)workspace這個(gè)項(xiàng)目，使用ES6編寫(xiě)代碼：

let 報(bào)錯(cuò).png

我們需要更改webstorm的設(shè)置讓他支持ES6語(yǔ)法：

更改設(shè)置.png

這樣就不會(huì)報(bào)錯(cuò)了。

babel全局安裝

運(yùn)行npm install -g babel-cli

安裝babel.png

安裝成功.png

然后安裝轉(zhuǎn)換插件（此插件定義了 ES2015 轉(zhuǎn)碼規(guī)則，相當(dāng)于是字典的功
能）： npm install babel-preset-es2015 –save

安裝插件.png

文件目錄.png

CND命令行轉(zhuǎn)換ES6-----ES5
babel es6.js --out-file es5.js --presets es2015

可以看到es6.js中的 let 和 箭頭函數(shù) 轉(zhuǎn)換為了es5.js中瀏覽器可以識(shí)別的es5代碼

es6.js中的代碼.png

轉(zhuǎn)換為

es5.js中的代碼.png

這些就是babel自動(dòng)幫我們做的。

當(dāng)然我們可以設(shè)置自動(dòng)轉(zhuǎn)換，也就是每寫(xiě)一行代碼會(huì)自動(dòng)轉(zhuǎn)換過(guò)去，不過(guò)這樣會(huì)很耗性能。
babel es6.js -w --out-file es5.js --presets es2015

可以看到我們只要更改了es6.js里面的內(nèi)容就會(huì)記錄操作：

cmd記錄.png

同樣當(dāng)我們代碼錯(cuò)誤，也會(huì)報(bào)錯(cuò)：

cmd報(bào)錯(cuò).png

小結(jié)

配置環(huán)境遇到了很多坑，node更新太快了導(dǎo)致很多包有兼容性問(wèn)題，如果nodev8.4.0，使用過(guò)程中出現(xiàn)error -4048 請(qǐng)使用低版本 推薦 v6.9.2 版本 。
下次我會(huì)嘗試使用 Browsersync 實(shí)時(shí)刷新頁(yè)面和 Babel-Core 實(shí)時(shí)轉(zhuǎn)換
ES6 ，謝謝大家。