登录  /  注册

phpstorm下如何设置babel编译

藏色散人
发布: 2021-03-18 17:36:26
转载
1692人浏览过

下面由phpstorm教程栏目给大家介绍phpstorm下如何设置babel编译,希望对需要的朋友有所帮助!

phpstorm下如何设置babel编译

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,然后点击上边的加号添加新的扩展工具:

7579f77e6703e1dd1aacb923cb93470.png

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

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

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

136148eb13a88cf32fccef9f94209f9.png

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

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

以上就是phpstorm下如何设置babel编译的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:segmentfault网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号