ES6开发环境配置

随着时间的推移，浏览器对ES6支持度已经越来越高了，超过90%的 ES6 语法特性都实现了。虽然有些浏览器对ES6的支持程度已经很高了（Chrome59 97%，Safari10 99%），但是很多人使用的IE对ES6的支持任然很不理想（IE11 11%），所以在实际工程应用中，我们还需要将ES6转化成ES5。各大浏览器的最新版本，对 ES6 的支持可以查看kangax.github.io/es5-compat-table/es6/。

环境支持

Node 是 JavaScript 的服务器运行环境（runtime）。它对 ES6 的支持度更高，除了那些默认打开的功能，还有一些语法功能已经实现了，但是默认没有打开。使用下面的命令，可以查看 Node 已经实现的 ES6 特性。

node --v8-options | grep harmony

上面命令的输出结果，会因为版本的不同而有所不同。

转码

通过特定的转码器，如Babel，或在线的转换器，将ES6转换成ES5再进行部署。

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。相对于之前的Babel5，Babel6不再是一个整的大的package，而是拆分了很多个小的package可供选择安装，可以根据项目进行自定义。下面介绍Babel的开发环境的配置。

1. 命令行使用（手动编译）

1. 安装babel-cli，支持命令行使用babel

npm install --save-dev babel-cli

完成之后，我们还不能编译ES6文件，因为 babel 不再包含任何 transform 功能，babel6里把它们作为插件（plugin）分割出去，需要我们自己定义。

1. 安装babel-preset-env
   要想编译ES6文件，我们必须安装相关的插件，babel-preset-env打包了所有用于转换ES6的插件，安装babel-preset-env:

npm install --save-dev babel-preset-env

babel还有babel-preset-es2015，babel-preset-es2016等插件，每一年的preset仅编译那一年的批准的规则，而babel-preset-env则包含es2015，es2016，es2017和latest等。

1. 配置
   安装完babel-preset-env之后，还需要一步，在package.json或.babelrc文件启用babel-preset-env:
   “`
   “babel”: {
   “presets”: [
   “env”
   ]
   }

4. 编译完成以上安装后，就可以编译文件了：```shell<div class="se-preview-section-delimiter"></div># 转码结果输出到标准输出babel example.js<div class="se-preview-section-delimiter"></div># 转码结果写入一个文件 --out-file 或 -o 参数指定输出文件babel example.js --out-file compiled.js<div class="se-preview-section-delimiter"></div># 转码整个目录 --out-dir 或 -d 参数指定输出目录babel src --out-dir lib<div class="se-preview-section-delimiter"></div>#忽略spec和test文件babel src --out-dir lib --ignore spec.js,test.js<div class="se-preview-section-delimiter"></div># -s 参数生成source map文件babel src -d lib -s<div class="se-preview-section-delimiter"></div>

更多选项

2. Webstorm编译（IDE）

1. 开启ES6语法支持
   Webstorm已经支持ES6语法了，但是默认情况下没有开启，需要我们手动开启，打开Preferences->Languages & Frameworks->JavaScript，在选项中设置为ES6。
   

2. 安装babel-cli和babel-preset-env

npm install --save-dev babel-preset-env babel-cli<div class="se-preview-section-delimiter"></div>

1. 配置babel File Watcher
   File Watcher是一个Webstorm内置工具，可以在文件发生变化时自动执行相关命令，对于babel，已经有预存的配置，我们激活配置即可使用：
   Preferences->Tools->File watchers
   点击’+’按钮，选择babel，在File watcher配置中，指定babel-cli在node_modules中的路径：
   
   在Webstorm 2017.1中，编译过的文件存放在dist文件夹中，可以自己设置输出文件路径，输入文件路径，编码的文件类型等参数，更多配置请参考Webstorm官网。当然，你也可以在package.json或者.babelrc配置文件中指定，添加适合你工程的配置。

3.VS Code配置

1. 安装babel-cli和babel-preset-env

npm install --save-dev babel-cli babel-preset-env<div class="se-preview-section-delimiter"></div>

1. 配置package.json，设置生成souremaps

{  "scripts": {    "build": "babel src -d dist --source-maps"  }}<div class="se-preview-section-delimiter"></div>

1. 在.vscode目录下的tasks.json文件中写入如下配置，如果没有这个文件，就创建一个

{    "version": "0.1.0",    "command": "npm",    "isShellCommand": true,    "showOutput": "always",    "suppressTaskName": true,    "tasks": [        {            "taskName": "build",            //此处第二个参数"build"要与上一步中的scripts中的编译脚本的名字一样            "args": [ "run", "build" ],            "isBuildCommand": true        }    ]}<div class="se-preview-section-delimiter"></div>

1. 打开.vscode目录下的launch.json文件，在 configurations中添加如下配置，通过使用preLaunchTask
   在启动前进行编译，如果没有launch.json文件，打开调试，在启动程序一栏，下拉，添加配置即可

    "configurations": [        {            "type": "node",            "request": "launch",            "name": "启动程序",            "program": "${workspaceRoot}/src/index.js",//需要编译的文件            "stopOnEntry": false,            "args": [],            "cwd": "${workspaceRoot}",            //此处的"build"要和上一步的tasks中的taskName一样            "preLaunchTask": "build",            "runtimeExecutable": null,            "runtimeArgs": ["--nolazy"],            "env": {                "NODE_ENV": "development"            },            "sourceMaps": true,               "outFiles": [                "${workspaceRoot}/dist"//输出文件的目录            ]        }    ]<div class="se-preview-section-delimiter"></div>

5. 启动调试或者按F5，就可以在输出目录下看到编译好的文件

4. 浏览器环境

Babel 也可以用于浏览器环境。但是，从 Babel 6.0 开始，不再直接提供浏览器版本，而是要用构建工具构建出来。如果你没有或不想使用构建工具，可以使用babel-standalone模块提供的浏览器版本，将其插入网页。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script><script type="text/babel">// Your ES6 code</script><div class="se-preview-section-delimiter"></div>

注意，网页实时将 ES6 代码转为 ES5，对性能会有影响。生产环境需要加载已经转码完成的脚本。
更多转换方法请参考 《ECMAScript 6 入门》

5. 关于Babel

1. babel-node
   babel-cli工具自带一个babel-node命令，提供一个支持ES6的REPL(Read-Eval-Print-Loop)环境。它支持Node的REPL环境的所有功能，而且可以直接运行ES6代码。它不用单独安装，而是随babel-cli一起安装。然后，执行babel-node就进入REPL环境。

<div class="se-preview-section-delimiter"></div>#进入REAL环境babel-node<div class="se-preview-section-delimiter"></div>#babel-node命令可以直接运行ES6脚本(.js可以省略)babel-node test.js<div class="se-preview-section-delimiter"></div>#babel-node也可以安装在项目中npm install --save-dev babel-cli<div class="se-preview-section-delimiter"></div>

1. babel-polyfill
   这将模拟一个完整的ES2015 +环境，旨在用于应用程序而不是库/工具。Babel 默认只转换新的 JavaScript 句法（syntax），而不转换新的 API，比如Iterator、Generator、Set、Maps、Proxy、Reflect、Symbol、Promise等全局对象，以及一些定义在全局对象上的方法（比如Object.assign）都不会转码。
   举例来说，ES6 在Array对象上新增了Array.from方法。Babel 就不会转码这个方法。如果想让这个方法运行，必须使用babel-polyfill，为当前环境提供一个垫片。

<div class="se-preview-section-delimiter"></div>#因为它是一个填充工具（在源码之前运行），所以它是一个dependency，而不是devDeoendencynpm install --save babel-polyfill<div class="se-preview-section-delimiter"></div>

然后在程序的入口包含polyfill，确保在其他引用声明之前调用

<div class="se-preview-section-delimiter"></div>#noderequire("babel-polyfill");<div class="se-preview-section-delimiter"></div>#es6import("babel-polyfill");<div class="se-preview-section-delimiter"></div>

当使用webpack时，在webpack.config.js文件的入口数组中添加babel-polyfill:

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

参考文章：

1. 《ECMAScript 6 入门》
2. Webstorm，Babel 官方文档
3. debugging in Visual Studio Code with babel-node

说明

所有内容都已在macOS Sireea 10.12.5，cnpm@4.5.0，npm@3.10.10，node@6.10.2，babel-cli@6.24.1，babel-preset-env@1.5.2，Webstorm 2017.1，VS Code@1.13.1环境下实现并验证。
PS：初次写作，如有不足与错误之处，请多多指教。