如何在phpstrom上利用babel实现自动编译es6文件

win10系统，babel折腾了一天才安装成功，找了网上很多资料，感觉有些乱，所以自己把网上的资料和自己踩的坑整理了一下，仅供大家参考：

1.新建一个项目

1.创建一个新文件夹作为根目录，如：babeltest

2.在根目录下新建一个js文件测试用，如：test.js

3.可以写入以下一段代码做测试用，当然别忘了将默认的 Settings > Languages & Frameworks > JavaScript：ECMAScript5.1选成ECMAScript6，不然使用ES6的语法会报错

'use strict';
// node直接运行ES6代码时，如使用了ES6的一些关键字，比如let，就需要严格模式，否则会报错
// 这是没有严格模式时候的错误提示
// SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

function* fibs() {// Generator Function
    let a = 0;
    let b = 1;
    while (true) {
        yield a;
        // [a, b] = [b, a + b];
        b = a + b;
        a = b - a;
    }
}
let [first, second, third, fourth, fifth, sixth] = fibs();
console.log(first, second, third, fourth, fifth, sixth);

2.在根目录下创建一个package.json

1.package.json内容如下

{
  "name": "test-project",
  "version": "1.0.0"
}

2. 然后打开IDE的Terminal，安装babel-cli

npm install --save-dev babel-cli

3.在根目录下创建一个.babelrc文件

1..babelrc内容如下：

{
  "presets": [
    "es2015"
  ]
}

2.还是在 Terminal，安装babel的ES6的preset

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

4.添加一个File watcher

1.在 Settings > Tools > File Watchers  添加Babel的watcher，记得前面要打对勾选中！

2.Program的设置为

$ProjectFileDir$\node_modules\.bin\babel

报错的话写成下面的试试

$ProjectFileDir$\node_modules\.bin\babel.cmd

现在改变js文件的话应该就会默认在根目录底下创建出dist文件夹，转换好的js文件就会出现在里面啦！

如果报错的话可以将Arguments里的dev改成es2015，如下：

$FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets es2015

应该就可以了~