JS

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-clinpm install --save-dev babel-preset-envnpm 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

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