ECMAScript 是 JS 的語言標準。而 ES6 是新的 JS 語法標準。html
PS：嚴格來講，ECMAScript 還包括其餘不少語言的語言標準。es6
ECMAScript 發展歷史
1995年：ECMAScript 誕生。npm
1997年：ECMAScript 標準確立。json
1999年：ES3 出現，與此同時，IE5 風靡一時。windows
2009年，ES5 出現，例如 foreach、Object.keys、Object.create 和 json 標準。瀏覽器
2015年6月，ES6正式發佈。babel
ES6 的目標是：讓 JS 語言能夠編寫複雜的大型應用程序，成爲企業級開發語言。工具
ES6 的其餘優點
使用 babel 語法轉換器，支持低端瀏覽器。ui
流行的庫基本都是基於 ES6 構建。 React 默認使用 ES6 標準開發。spa
ES6的環境配置
掌握 ES6 以後，若是要考慮 ES5 的兼容性，能夠這樣作：寫 ES6 語法的 js 代碼，而後經過 Babel將 ES6 轉換爲 ES5。
可是，在這以前，咱們須要配置一下相關的環境。
創建工程目錄
（1）先創建一個空的工程目錄 ES6Demo，並在目錄下創建兩個文件夾 src和 dist：
src：書寫ES6代碼，咱們寫的 js 程序都放在這裏。dist：利用 Babel 編譯生成的 ES5 代碼。咱們在 HTML 頁面須要引入 dist 裏的 js 文件。
（2）在 src 裏新建文件 index.html：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 咱們引入 ES5 中的 js 文件，而不是引入 ES6 中的 js 文件。 --> <script src="./dist/index.js"></script> </head> <body> </body> </html>
注意，上方代碼中，咱們引入的是dist目錄下的 js 文件。
而後咱們新建文件 src/index.js：
let a = 'smyhvae'; const b = 'vitateam'; console.log(a); console.log(b);
這個文件是一個 ES6語法 的js文件，稍後，咱們嘗試把這個 ES6 語法的 js 文件轉化爲 ES5 的 js 文件。
PS：咱們在寫代碼時，能用單引號儘可能用單引號，而不是雙引號，前者在壓縮以後，程序執行會更快。
全局安裝 Babel-cli
（1）初始化項目：
在安裝Babel以前，須要先用 npm init 先初始化咱們的項目。打開終端或者經過cmd打開命令行工具，進入項目目錄，輸入以下命令：
npm init -y
上方代碼中，-y 表明所有默認贊成，就不用一次次按回車了（稍後再根據須要，在文件中手動修改）。命令執行完成後，會在項目的根目錄下生成package.json文件：
{ "name": "es6demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "smyhvae", "license": "ISC" }
PS：VS Code 裏打開終端的快捷鍵是：Contol + ~。
（2）全局安裝 Babel-cli：
在終端中輸入如下命令：
npm install -g babel-cli
若是安裝比較慢的話，Mac 下能夠使用cnpm進行安裝 ，windows 下能夠使用nrm切換到 taobao 的鏡像。
（3）本地安裝 babel-preset-es2015 和 babel-cli：
npm install --save-dev babel-preset-es2015 babel-cli
安裝完成後，會發現package.json文件，已經多了 devDependencies 選項：
（4）新建.babelrc：
在根目錄下新建文件.babelrc，輸入以下內容：
{ "presets":[ "es2015" ], "plugins":[] }
（5）開始轉換：
如今，咱們應該能夠將 ES6 的文件轉化爲 ES5 的文件了，命令以下：（此命令略顯複雜）
babel src/index.js -o dist/index.js
咱們能夠將上面這個命令進行簡化一下。操做以下：
在文件 package.json 中修改鍵 scripts中的內容：
"scripts": { "build": "babel src/index.js -o dist/index.js" },
修改後的效果以下：
目前爲止，環境配置好了。之後，咱們執行以下命令，便可將src/index.js這個 ES6 文件轉化爲 dist/index.js這個 ES5 文件：
npm run build
咱們執行上面的命令以後，會發現， dist目錄下會生成 ES5 的 js 文件：
index.js：
'use strict'; var a = 'smyhvae'; var b = 'vitateam'; console.log(a); console.log(b);
當咱們打開網頁後，就能夠在瀏覽器的控制檯，看到代碼的輸出結果。