Atom编辑器中自动编译jsx文件

Facebook之前有提供jsx工具，可以通过命令行实现jsx文件编译成js文件，babel的强大让facebook放弃了jsxTransform工具，直接用babel来实现jsx到js的编译，不过通过使用babel命令行来进行jsx的编译还是不方便。幸运的是现在atom可以安装language-babel插件来实现jsx的自动编译，jsx编辑时一按保存按钮就会自动生成js文件和sourceMap文件，真是高大上。

安装language-babel的过程就不说了，简单说一下配置：

（1）在Atom的language-babel的Setting中将Allow Local Override打勾

（2）在你的项目根目录建立一个.languagebabel文件，配置类似如下实例：

{

“babelTranspilePath”:”./assets/js/app”, //jsx文件编译成js文件的存放目录

“babelSourcePath”:”./assets/js/src”, //jsx文件的源目录

“transpileOnSave”:true, //在保存时是否自动编译

“createMap”:false, //是否创建sourceMap文件，有用sourcemap的可以true

“babelMapsAddUrl”:false, //是否在生成的js最下方添加sourceMap的地址

“createTargetDirectories”:false, //当生成js文件时，对应的目录不存在，是否自动创建

“createTranspiledCode”:true //为true时才会编译

}

（3）用atom编辑jsx文件时，要注意右下角下图所示这个地方，系统要以Babel ES6 JavaScript方式打开的才会使用到language-babel插件，如果不是，请点击更改。

配置完毕后，你可以测试一下，写一个jsx文件，然后按保存，如果正常的话，系统会在右上角弹出对话框，告诉你成功编译了。