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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 写在开头 先说说为什么要写这篇文章, 最初的原因是组里的小朋友们看了webpack文档后, 表情都是这样的: (摘...
    Lefter阅读 5,451评论 4 31
  • 无意中看到zhangwnag大佬分享的webpack教程感觉受益匪浅,特此分享以备自己日后查看,也希望更多的人看到...
    小小字符阅读 8,379评论 7 35
  • GitChat技术杂谈 前言 本文较长,为了节省你的阅读时间,在文前列写作思路如下: 什么是 webpack,它要...
    萧玄辞阅读 12,912评论 7 110
  • 作者:王子亭 Atom 是 GitHub 在 2014 年发布的一款基于 Web 技术构建的文本编辑器,我从 20...
    LeanCloud官方帐号阅读 3,319评论 0 13
  • 十一点半,巧克力才再次入睡。 十点半,睡着又起来了。十一点,还在玩给妈妈手机充电的游戏。起初很笨拙的效仿妈妈给手机...
    喜上梅梢阅读 225评论 0 0

友情链接更多精彩内容