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时也要遵循。