在IDEA(phpStorm)中使用Babel编译ES6

安装Babel

官方文档建议咱们根据单个项目进行本地安装，缘由是不一样的项目能够依赖不一样版本的 Babel，使你的项目更方便移植、更易于安装。
在项目的根目录下使用命令行工具（CMD等）执行下面代码

npm install --save-dev babel-cli

安装编译规则

官方提供了几套预设的规则集，分别适用于 ES201五、React 和 ES7 的一些实验性特性。咱们能够根据须要安装（若是只须要学习 ES6 语法的话，就只选 ES2015 好了）。

# ES2015转码规则
npm install --save-dev babel-preset-es2015
 
# react转码规则
npm install --save-dev babel-preset-react
 
# ES7不一样阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

.babelrc 文件配置

（1）在项目根目录下建立一个 .babelrc 文件。注意：Windows 系统没法直接建立这样的文件，咱们能够借助命令行、或者代码编辑器来建立。
（2）该文件中输入以下内容来启用预设（假设咱们用到了 ES2015 这一个转码规则）。

{
    "presets": [
      "es2015"
    ],
    "plugins": []
}

好了，如今Babel的安装告一段落，接下来开始在phpStorm中设置Babel的配置了

在IDEA(phpStorm)中设置Babel

1.首先在Settings->Languages & Frameworks中选择JavaScript选项，而后将右侧JavaScript的版本设置为ECMAScript6

2.而后在搜索框中搜索File Watcher，点图中的加号按钮，选择babel就会弹出一个New Watcher窗口

3.在Program这项里面放入babel.cmd文件的入径,个人路径是(E:\dev\phpStudy\PHPTutorial\WWW\jinzhai\node_modules.bin\babel.cmd)

4.将Arguments项里面的代码替换成$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets=es2015，点击OK，应用便可

使用

在项目中新建test.js文件编写ES6语法的代码，在根目录下会自动生成dist文件夹及对应的编译后的ES5文件

祝使用愉快。