phpstorm下怎么设置babel编译

这篇文章将为大家详细讲解有关phpstorm下怎么设置babel编译,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

创新互联建站主营茂南网站建设的网络公司,主营网站建设方案,重庆APP软件开发,茂南h5小程序制作搭建,茂南网站营销推广欢迎茂南等地区企业咨询

phpstorm下设置babel 编译

在phpstorm下使用扩展工具直接进行babel 编译,主要是对jsx进行编译,不用再引入browser.min.js,对学习reactjs有用处,初学走了不少弯路才弄懂,希望对初学者有所帮助,以下是配置步骤:

首先,安装nodejs、phpstorm这个就不说了,官网看;

然后,npm install babel babel-cli babel-preset-es2015  babel-preset-react
(注意 这里不用在意是否是全局安装,nodejs也可以选在安装在d e f盘……)

打开phpstorm,点左上 file->setting->tools->External tools,然后点击上边的加号添加新的扩展工具

填写扩展工具名称BABEL,不多说,下面的配置就如上图,配完点击OK。

配置完后开始设置babel运行的快捷键:回到setting搜索 key,点击keymap:

进入External tools->BABEL(babel编译工具的名称),双击add keyboard shortcut设置(我用的Alt+n,快捷键不冲突就行)
最后一步,点开jsx文件,Alt+n 运行。

生成的js文件在html页面里引用,然后打开浏览器就能看到效果,配置babel-preset-es2015 是一样的方法,用不同快捷键。

对reactjs有一定了解,此文的配置方法才使用得当(^__^) (在webstorm下一样适用)。

关于“phpstorm下怎么设置babel编译”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。


网站名称:phpstorm下怎么设置babel编译
当前网址:http://bzwzjz.com/article/pijopj.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 网站制作 手机网站制作 成都网站设计 重庆网站设计 营销型网站建设 手机网站建设 网站建设方案 成都营销网站建设 成都网站建设 四川成都网站设计 定制网站设计 app网站建设 成都网站建设 网站设计公司 营销网站建设 网站建设方案 成都企业网站制作 四川成都网站建设 定制网站建设 网站设计制作报价 成都网站制作 成都网站制作