IDEA - Babel插件

2.安装Babel插件
在IDEA中，打开Terminal窗口，而后输入命令并回车

npm install --save-dev babel-cli babel-preset-env

若是提示找不到npm则须要重启下IDEA。

3.安装File Watchers插件
File Watchers插件是一个框架，用于监视特定文件的修改，而后按照用户的配置执行某些特殊的指令。如今我要File Watchers监视es6的文件，文件一旦改动就调用Babel转化为es5文件。
点击菜单栏上的File->Settings->Plugins->Browse Repositories。在打开的仓库搜索页面上输入 file watchers 搜索并选择安装。安装插件后若是提示须要重启生效则选择重启。

 

4.配置Babel
从新打开IDEA后，点击菜单栏中的File->Settings->Tools->File Watchers打开File Watchers的设置页。若是右侧菜单里已经有配置条目了，则删除已存在的设置。
而后点击右上角绿色的的“+”，在下拉菜单中选择Babel打开New Watcher窗口。窗口中有不少设置。具体说明以下

Name:
监视规则的名称，随便写，好比 Babel:convert es6 to es5
File type:
监视的文件类型，具体的类型能够在Settings->Editor->File Types中查看和修改。在这里选择ECMAScript6,包含了全部扩展名是es6的文件（*.es6）
Scope:
源，须要监视哪些文件，这里选择Project Files 表示监视整个项目
Program：
程序，这里输入须要调用的程序的路径，也就是Babel的执行文件。由于以前已经把Babel安装到了项目目录，那么这里的路径是 【项目的根目录】+【\node_modules\.bin\babel.cmd】。好比个人项目放在D:\projects\oa，那么这里填写

D:\projects\oa\node_modules\.bin\babel.cmd

Arguments：
运行参数 填写

--source-maps --out-file $FileDir$\$FileNameWithoutExtension$.js --presets env $FilePath$

Output paths to refresh:
转化后的文件存放路径 填写

$FileNameWithoutExtension$.js:$FileNameWithoutExtension$.js.map

取消严格模式

默认状况下，转换出来的代码使用了严格模式。若是你不想用，那么则能够进行以下操做
1.安装一个额外取消严格模式的插件
npm install babel-plugin-transform-remove-strict-mode
2.在babel执行参数中增长一个参数调用插件
–plugins transform-remove-strict-mode （注意plugins前面是2个【-】，不是一个，博客把2个-合并成了一个比较长的–）