ES6的相關信息

ECMAScript 是什麼？

ECMAScript 是 Javascript 語言的標準。
ECMA European Computer Manufactures Association（歐洲計算機制造商協會），主要任務
是研究信息和通信技術方面的標準併發布有關技術報告。
ECMAScript6：簡稱 ES6，是 JavaScript 語言的下一代標準，也是目前正是發佈的最新
JavaScript 標準，因爲 ES6 是在 2015 年發佈，因此 ES6 也成爲 ECMAScript2015。

 

運行 ECMAScript6 的途徑

瀏覽器（IE、Firefox、Chrome、Safari、Opera 等）
瀏覽器對 ES6 的支持狀況 http://kangax.github.io/compat-table/es6/

使用 Javascript 引擎的系統（如 Node.js）

Node.js 是一個 Javascript 運行環境(runtime)。實際上它是對 Google V8 引擎進行了封裝。
V8 引擎執行 Javascript 的速度很是快，性能很是好。Google Chrome 瀏覽器就是用的 V8 引
擎。
Node.js 下載地址 https://nodejs.org/zh-cn/ ，目前支持到 97%。

使用 Babel 工具將 ECMAScript6 轉換爲 ECMAScript5
Babel 是 ES2015 語法轉化器。這些轉化器能讓你如今就使用最新的 JavaScript 語法，而不
用等待瀏覽器提供支持。

 

NodeJs 安裝步驟

nvm（NodeJs 版本管理工具）安裝

Windows 操做系統的 nvm 下載地址 https://github.com/coreybutler/nvm-windows/releases

 在cmd輸入nvm -h查看是否成功

輸入nvm root，找到安裝的路徑

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

修改 D:\dev\nvm\settings.txt  經過上一步找到
root: D:\dev\nvm 
path: D:\dev\nodejs
node_mirror: http://npm.taobao.org/mirrors/node/
npm_mirror: https://npm.taobao.org/mirrors/npm/

 

經過 nvm 安裝某版本的 nodejs 集（node、npm（nodejs 包管理工具））
64 位系統：CMD 運行 nvm install 6.9.2
32 位系統：CMD 運行 nvm install 6.9.2 32
注意：其中 6.9.2 表示安裝 node 版本爲 6.9.2，這裏 npm 是包含在 node 中的不須要單獨安
裝

安裝node.js後，使用nvm list，查看node.js版本

使用nvm use 版本號，切換使用的node

 

npm 設置淘寶鏡像（下載更快）

npm config set registry https://registry.npm.taobao.org

在不一樣的環境中使用 ES6
在 NodeJs 環境中運行 ES6

在 Chrome 56（64bit）瀏覽器中運行 ES6

在 IE9 瀏覽器中運行 ES6

 

ES6 到 ES5 的轉換

使用 Babel 完成 ES6 到 ES5 的轉換

使用 npm 建立一個 NodeJs 工程，步驟如圖：

使用 webstorm 編寫 ES6 代碼

WebStorm 配置支持 ES6 語法規則

babel 全局安裝

npm install -g babel-cli

安裝轉換插件（此插件定義了 ES2015 轉碼規則，至關因而字典的功
能）：

npm install babel-preset-es2015 --save-dev

CMD 命令行轉換 ES6 到 ES5
babel es6.js --out-file es5.js --presets es2015

自動轉換

babel es6.js -w --out-file es5.js --presets es2015
添加並編寫 index.html 文件

運行結果

使用 Browsersync 實時刷新頁面和 Babel-Core 實時轉換ES6

Browsersync 能讓瀏覽器實時、快速響應您的文件更改（html、js、css、sass、less 等）並自
動刷新頁面。

安裝 Browsersync

npm install -g browser-sync

安裝 babel-core（在網頁上實時轉換 ES6 到 ES5）

npm install babel-core@5 --save

HTML 頁面引入 babel-core 實時轉換 js 代碼

/node_modules/babel-core/browser.min.js
/node_modules/babel-core/browser-polyfill.min.js

在當前項目目錄下啓動 Browsersync，開始監聽

browser-sync start --server --files "**"

修改 es6.js

頁面自動刷新，結果以下：

這裏的 ES6 到 ES5 的轉換時在瀏覽器端實現的；
可同時刷新 Chrome 和 IE11，如今 ES6 也能夠在各類瀏覽器上使用了。

回到命令行的方式再來看看：
CMD 運行 babel es6.js --out-file es5.js --presets es2015

查看編譯後的 es5.js

上面講到了 2 兩種 es6->es5 的轉換：babel 命令行方式和瀏覽器引入 babel-core 方式

 

還有第三種方式，那就是 webstorm 自帶的 File Watcher 功能
自動配置 File Watcher

注意：當輸入了 es6 語法規則的代碼後，webstorm 會自動彈出這種提示。

再次修改 es6.js

保存 es6.js 經過 webstorm 的 File Watcher 功能會自動生成轉換後的 es6.js 和 es6.js.map

 

還有一種方法是

直接默認配置就行

備註

這裏面的東西，表示的是各個屬性表明的含義

 

如今webstrom裏面是這個

 

npm install  babel-preset-env  --save-dev只要安裝這個就行，不用es2015插件

地址：http://www.jianshu.com/p/41d3f7768095