webstorm上利用babel实现自动编译es6文件

做者：喵皙曦溪灼其华
连接：https://www.zhihu.com/question/43414079/answer/95642131
来源：知乎
著做权归做者全部，转载请联系做者得到受权。

题主习惯了WebStorm的话..我就假设题主会用Node.js和npm啦～
一句话总结：用WebStorm自带的File Watcher功能+Babel实现自动转换ECMAScript 6代码为ES5代码
 

• 我是这么配置的..就先新建一个Empty Project，而后在src目录下新建了一个main.js；

// 这一步不是必须的 只是刚上手的话 从空项目开始本身配置会少不少干扰
 

• Then..进入设置，把JavaScript language version改为ECMAScript 6；

 

• 再Then..写一段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);

 

• 如今IDE会出现一个File watcher提示条

 

• 先别点Add watcher！咱们要先去装babel～
  • 首先在根目录新建一个package.json

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

 

• • 而后打开IDE的Terminal，安装babel-cli

npm install --save-dev babel-cli

 

• Good! 如今能够去点Add watcher啦，点完以后会弹出一个框，其中大部分设置IDE都帮你搞定了

下面第三行，Program那一项，填

$ProjectFileDir$/node_modules/.bin/babel

而后点OK，这个时候你就会发现左边多出来一个main-compiled.js文件啦
 

• 可是还没搞定！如今只是搞定了自动转换的功能，系统默认把ES6 compile成了ES6..（你应该会发现compile出来的东西跟原来的同样..Generator函数并无被转换成ES5的格式）

因此咱们须要安装Babel的preset以正确识别ES6代码；
 

• • 和刚才同样，在npm安装babel的ES6的preset

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

 

• • 在根目录下新建一个.babelrc文件（就是babel在当前项目的配置文件），写上

{
  "presets": [
    "es2015"
  ]
}

 

• OK搞定！保存再回去看一下main-compiled.js 应该就变成这个样子啦，如今你在main.js里直接写ES6代码，IDE都会自动compile成ES5的代码在这里啦～

 

• 注意：想直接用Node.js运行ES6代码仍是有些问题..由于这段代码用的ES6的解构赋值Node.js还未彻底支持，须要在运行的时候加入一些tags（以开启Node.js的相关试验特性），具体能够参考Node.js官网对ES6的说明：ECMAScript 2015 (ES6)