IntelliJ IDEA 配合 Babel插件 实现项目JavaScript ES6无缝转换ES5

Babel是一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行。这意味着,你可以现在就用 ES6 编写程序,而不用担心现有环境是否支持。

现在可以使用IDEA的Files Watchers 插件配合Babel实现项目中的使用ES6语法的JavaScript文件自动转换为ES5语法的文件,且生成的es5文件和es6文件存放在同一目录下。

操作步骤


1.环境安装与配置
因为Babel是基于NodeJs开发的插件,所以我们必须先安装nodejs环境。nodejs可以去 nodejs.cn 下载。安装时可以一路点击 Next 完成安装而不进行设置。

IntelliJ IDEA 配合 Babel插件 实现项目JavaScript ES6无缝转换ES5-我的技术分享

 

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

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

如果提示找不到npm则需要重启下IDEA。

IntelliJ IDEA 配合 Babel插件 实现项目JavaScript ES6无缝转换ES5-我的技术分享

 

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

IntelliJ IDEA 配合 Babel插件 实现项目JavaScript ES6无缝转换ES5-我的技术分享

 




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

IntelliJ IDEA 配合 Babel插件 实现项目JavaScript ES6无缝转换ES5-我的技术分享

测试


在项目中新建一个扩展名为es6的文件,在里面随便写一点es6的语法测试代码
然后保存这个文件,再次打开文件并修改内容,再关闭这个文件。
检查下文档目录中的这个文件前面是不是多了个箭头,点击后的下属目录中有个同名js文件和map文件(可能需要刷新下目录)
源文件
IntelliJ IDEA 配合 Babel插件 实现项目JavaScript ES6无缝转换ES5-我的技术分享

转换后的文件

IntelliJ IDEA 配合 Babel插件 实现项目JavaScript ES6无缝转换ES5-我的技术分享


取消严格模式

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