• 技术文章 >开发工具 >phpstorm

    phpstorm下如何设置babel编译

    藏色散人藏色散人2021-03-18 18:18:49转载373
    下面由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,然后点击上边的加号添加新的扩展工具:

    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中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:phpstorm
    上一篇:分享PhpStorm高手的8个神技巧 下一篇:Goland永久激活
    第15期线上培训班

    相关文章推荐

    • PHPstorm设置行号及文件编码格式• 解决phpstorm ctr+alt+left|right键无效问题• PhpStorm怎么连接docker容器内的php XDebug进行断点调试• 分享mbp上常用的PhpStorm快捷键• 分享PhpStorm高手的8个神技巧

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网