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

时间：2022-08-09 17:51:33

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

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

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

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

步骤一：修改Watched Files下的Scope，它代表的是自动编译的范围。
1. 选择Scope右侧的下拉框中的Custom Scopes选项，自定义Scope为file[BabelDemo]:source/*/*
JS - WebStrom使用Babel自动编译ES6为ES5
注意，当写的时候右侧的Scope contains 2 of total 20 表示，当前的表示范围内有多少文件被找到了。
2. 修改Watcher Settings下的Arguments项，直接指定输入输出目录为

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

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

相关文章