利用babel自动编译es6文件

一、检查File-Watchers中Babel的Arguments，有一项presets的设置，把他更改为=es2015,详细设置如下：

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

二、把JavaScript language version改成ECMAScript 6；

安装base后，增加base的watch

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

下面第三行，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"
  ]
}

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

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

作者：周昆五
链接：https://www.zhihu.com/question/43414079/answer/155470633
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

原文地址：https://www.zhihu.com/question/43414079