westorm用babel自动编译ES6

ES6已然是行业标准，虽然有部分不思进取的浏览器还没有完全支持，但是已经是势不可挡了。

好吧，事实是公司已经用ES6开发前端了，这个没有办法，学呀。

工欲善其事，必先利其事，Webstorm自然不必说了，但是如何执行ES6呢，使用Babel吧，少年。

这是知乎上找到的，做一下备忘吧。废话少说，以下为步骤

1、新建一个javascript文件

import getGlobal from 'system.global';
const global = getGlobal();

console.log(global)

把这代代码放进去（记得用npm安装system.global模块）

2、idea会出现一个file watch的提示信息，先不管

3、新建一个package.json

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

把这些信息放进去，然后就安装babel-cli：

npm install --save-dev babel-cli

4、设置file watcher，如果不出现file watcher也没有关系，在设置里搜一下就可以了。

新建一个babel的设置，在watcher setting->Program中填入：

$ProjectFileDir$\node_modules\.bin\babel.cmd

5、安装babel的ES6的preset（我也不知道是什么鬼）

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

6、新建一个.babelrc文件

{
  "presets": [
    "es2015"
  ]
}

把这放进文件，就大功告成了。

运行的时候，运行生成的文件就可以了。

 

7、最后，这估计是把babel安装在项目的模块下，至于全局安装的（如果全局安装，不需要修改babel.cmd的路径），不知道是不是安装过，不生效纠结。

还有公司的大神都可以实现自动编译运行，有空研究一下他的配置，自己搞太蛋疼了。

 

参考资料：

怎么在webstorm上利用babel实现自动编译es6文件？