ES6(一: babel环境)

前言

睡着的人，你再怎么去叫它。他也不会清醒，而一个醒着的人，不管别人怎么去说它，也有一颗足够强大的内心，去追逐未来。

安装babel cli

你可能要问，将ES6 就ES6呗，为什么要安装babel？

就我个人而言，不管现在是ES7 还是ES6 ,最终肯定要转成Es5在浏览器跑，说穿了还不是兼容性问题。所以，安装babel是为了能看下编译的结果，首先，面试肯定会问，其次。也是一次加深影响的过程。

觉得麻烦的直接去在线的

https://babeljs.io/

先将npm初始化

$ npm init

然后一直回车，会在项目文件夹看到一个package.json

安装babel命令

$ npm install babel-cli -S

安装presets

Babel 的官网上在9月宣布 ES2015 / ES2016/ ES2017 等等 ES20xx 时代的 presets 通通被废弃（deprecated），取而代之的是 babel-preset-env，并且承诺它将成为“未来不会过时的（future-proof）”解决方案。

$ npm install --save-dev babel-preset-env@next

PS： env 我使用编译出现问题，所以还是选择Es2015

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

新建配置文件.babelrc

在文件夹根目录新建.babelrc

// es2015 文件内容{  "presets": [    "es2015"  ]}// 下面是env的写法，当前没采用{  "presets": [    "env"  ]}

ps: 更进一步就是env通过 targets 指定需要兼容的浏览器类型和版本（采用 ai/browserslist 查询语法 ）。这里不做详说，可以参照官方。

WS自动监听工程文件

用WebStorm自带的File Watcher功能+Babel实现自动转换ECMAScript 6代码为ES5代码，喜欢命令行的可以参考官网。

https://babeljs.io/docs/usage/cli/

到这里，你就可以在修改js后，使用Ctrl+S 保存看到babel编译结果了。

补充：
在项目中， 你可能还需要babel-polyfill插件

Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API ，比如 Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise 等全局对象，以及一些定义在全局对象上的方法（比如 Object.assign）都不会转码。Babel 默认不转码的 API 非常多，详细清单可以查看 definitions.js 文件

为了完整使用 ES6 的 API ，我们只能安装这个插件：

$ npm install -save-dev babel-polyfill

然后，在需要使用的文件的顶部引入

import "babel-polyfill"

node.js 中：

require('babel-polyfill');

webpack.config.js 中：

module.exports = {   entry: ['babel-polyfill', './app/js']}