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