ES6學習準備

ES6學習準備

選擇運行環境

ES6的語法，nodeJs、瀏覽器不必定都支持，不一樣版本的支持狀況不同。在學習過程當中，如何肯定是本身寫的代碼有問題，仍是運行環境不支持呢？

首先，瀏覽器端通常支持的特性有限(好吧，我剛查了，最新的不包括IE11瀏覽器ES6支持很好，可是手機端支持很差，那就要考慮到瀏覽器的多樣性)，因此我使用nodeJs環境。

nodeJs各版本支持es6狀況

更多平臺支持es6狀況

nodeJs支持ES6特性劃分

• shipping 已穩定支持
• Staged 已支持，後續語法可能有變更，開啓需加--harmony
• In progress 將來語法變更不會通知

查看nodeJs的v8版本

node -p process.versions.v8

查看本地nodeJs版本 In progress特性

node --v8-options | grep "in progress"

更多 https://nodejs.org/en/docs/es6/

使用babel跑起來

babel能夠將不支持的特性轉化成ES5支持的寫法。

配置

工程根目錄.babelrc

• 使用babel預設的presets

好比下面es2015，會將全部的ES6寫法轉換成ES5，可是原本nodeJs原生支持的，都轉化了，對性能很差。

"presets": [
    "babel-preset-es2015"
]

• 使用babel的plugin

首先要清楚你要使用哪些特性，對不支持的特性，選擇須要的babel插件，有針對的轉化。好比我本地是nodeJs是v5.6.0。

http://node.green/搜索strict mode，發現許多語法須要，好比如下錯誤。爲了以防萬一，全部模塊都加。我就加了插件transform-strict-mode。

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

爲了保險，要使用的harmony的特性也轉化下

相應的，我又加了其它插件。

"plugins": [
    "transform-strict-mode",
    "transform-es2015-modules-commonjs",
    "transform-es2015-destructuring",
    "transform-es2015-parameters"
]

安裝babel環境

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

運行

開發中，使用babel-node test.js運行代碼

發佈，使用babel src --out-dir lib生成轉化後代碼

注意：babel-node和babel命令，都接受.babelrc配置

其它

babel也有瀏覽器端的，引入轉碼Js。就能夠es6寫代碼直接跑起來。

babel入門

http://babeljs.io/docs/plugins/

嚴格模式的要求

ES6中，模塊默認就是strict mode；而且上面經過babel插件，每一個js自動注入了"use strict"; 在ES5中，嚴格模式有些要求，咱們在寫ES6時也要遵循。