PHPstorm设置babel编译的操作步骤是什么-群英

上一篇：打开PHPstorm报错的问题如何解决呢下一篇：PhpStorm编辑器中注释时间要怎样做

这篇文章将为大家详细讲解有关“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，然后点击上边的加号添加新的扩展工具：

填写扩展工具名称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编译

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：打开PHPstorm报错的问题如何解决呢下一篇：PhpStorm编辑器中注释时间要怎样做