JS - WebStrom使用Babel自动编译ES6为ES5

Demo地址在这里

首先，创建

package.json

和

.babelrc

：

pageage.json:

{
"name": "BabelDemo",
"version": "0.0.1",
"devDependencies": {
"babel-cli": "^6.24.1"
}
}

.babelrc:

{
"presets": ["env"]
}

使用命令添加babel-cli & babel-preset-env

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

至于

babel-preset-env

与

babel-preset-es2015

的区别请看这里

其次，创建测试JS文件

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

然后，添加File Watcher

在

WebStrom -> Preference -> Tools -> File Watchers

界面中点击

+

号,选择并使用默认值。

Note：

Watcher Settings

中

Program

选项，请选择当前工程目录下

./node_modules/.bin/babel

E.G：

/Users/UserName/YourProjectRoot/node_modules/.bin/babel

这步完成后就可以看到

dist

目录下中有一个经过转换后的

main.js

文件了

Note：别忘记设置

WebStrom -> Preference -> Language&Frameworks -> JavaScript -> Version = ECMScript6

最后，如何将指定目录下的文件输出到指定目录下呢

作为略微有些强迫症的Coder，我肯定是希望我的Webstrom工程目录是清晰的，如下所示：

ProjectRoot
|
-- source // 用于存放所有的html/js(ES6)/sass等文件
|
-- src // js(ES6)目录
-- sass
-- img
-- target // 用于存放所有自动编译后的html/js(ES5)/css等文件
|
-- src // js(ES5)目录
-- css
-- img

想要做到这样，需要修改Babel的自动编译配置选项。

WebStrom -> Preference -> Tools -> File Watchers -> Babel Setting

一般来说，默认配置如下所示：



想要自动编译到指定目录有2个步骤：

步骤一：修改Watched Files下的Scope，它代表的是自动编译的范围。

1. 选择Scope右侧的下拉框中的Custom Scopes选项，自定义Scope为

file[BabelDemo]:source/*/*

注意，当写的时候右侧的Scope contains 2 of total 20 表示，当前的表示范围内有多少文件被找到了。

2. 修改Watcher Settings下的Arguments项，直接指定输入输出目录为

被使用的：
source --out-dir dist  --presets env
不使用的：
// $FilePathRelativeToProjectRoot$ --out-dir dist --source-maps --presets env

经过这两步后，就大功告成了。