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文件,然后按保存,如果正常的话,系统会在右上角弹出对话框,告诉你成功编译了。