热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

phpstorm下如何设置babel编译

开发工具|phpstormphpstorm开发工具-phpstorm下面由phpstorm教学栏目给大家介绍phpstorm下如何设置babel编译,希望对需要的朋友有所帮助!如何

开发工具|phpstormphpstorm下如何设置babel编译
phpstorm
开发工具-phpstorm
下面由phpstorm教学栏目给大家介绍phpstorm下如何设置babel编译,希望对需要的朋友有所帮助!
如何下载离线网站源码,ubuntu怎么设置宽带,tomcat的项目路径怎么,java爬虫git,清空php变量,十堰seo推广怎么做lzw
php 计数 源码,刻录ubuntu安装光盘,如何去除tomcat中的版本号,php是爬虫吗,禅道是php语言开发的吗,seo准论坛lzw
phpstorm下设置babel 编译
柏拉图性格标签源码,vscode 快速注释,wily ubuntu,tomcat发布不了,用sqlite语句添加字段,jquery 支持视频弹窗插件,计算机前端三大框架,美国被爬虫人控制了吗,php 博客程序,无锡梅村seo优化,卡乐购卡盟网站,网页点击按钮翻页,帝国cms模板 蓝色 大气lzw
在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,然后点击上边的加号添加新的扩展工具:

phpstorm下如何设置babel编译

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

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

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

phpstorm下如何设置babel编译

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

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


推荐阅读
  • 如何实现织梦DedeCms全站伪静态
    本文介绍了如何通过修改织梦DedeCms源代码来实现全站伪静态,以提高管理和SEO效果。全站伪静态可以避免重复URL的问题,同时通过使用mod_rewrite伪静态模块和.htaccess正则表达式,可以更好地适应搜索引擎的需求。文章还提到了一些相关的技术和工具,如Ubuntu、qt编程、tomcat端口、爬虫、php request根目录等。 ... [详细]
  • 程序员如何选择机械键盘轴体?红轴和茶轴对比
    本文介绍了程序员如何选择机械键盘轴体,特别是红轴和茶轴的对比。同时还介绍了U盘安装Linux镜像的步骤,以及在Linux系统中安装软件的命令行操作。此外,还介绍了nodejs和npm的安装方法,以及在VSCode中安装和配置常用插件的方法。最后,还介绍了如何在GitHub上配置SSH密钥和git的基本配置。 ... [详细]
  • ORACLE空间管理实验5:块管理之ASSM下高水位的影响
    数据库|mysql教程ORACLE,空间,管理,实验,ASSM,下高,水位,影响,数据库-mysql教程易语言黑客软件源码,vscode左侧搜索,ubuntu怎么看上一页,ecs搭 ... [详细]
  • Php怎么编写乘法表
    后端开发|PHP问题php,乘法表后端开发-PHP问题传世登陆器源码,vscode设置字号,ubuntu系统创建不了文件,tomcat配置修改,sqlite怎么调中文,海洋采集插件 ... [详细]
  • 本文介绍了在CentOS上安装Python2.7.2的详细步骤,包括下载、解压、编译和安装等操作。同时提供了一些注意事项,以及测试安装是否成功的方法。 ... [详细]
  • 分享css中提升优先级属性!important的用法总结
    web前端|css教程css!importantweb前端-css教程本文分享css中提升优先级属性!important的用法总结微信门店展示源码,vscode如何管理站点,ubu ... [详细]
  • PHP函数实现分页含文本分页和数字分页【PHP】
    后端开发|php教程PHP,分页后端开发-php教程最近,在项目中要用到分页。分页功能是经常使用的一个功能,所以,对其以函数形式进行了封装。影视网源码带充值系统,vscode配置根 ... [详细]
  • mui框架offcanvas侧滑超出部分隐藏无法滚动如何解决
    web前端|js教程off-canvas,部分,超出web前端-js教程mui框架中off-canvas侧滑的一个缺点就是无法出现滚动条,因为它主要用途是设置类似于qq界面的那种格 ... [详细]
  • Linux下部署Symfoy2对app/cache和app/logs目录的权限设置,symfoy2logs
    php教程|php手册xml文件php教程-php手册Linux下部署Symfoy2对appcache和applogs目录的权限设置,symfoy2logs黑色记事本源码,vsco ... [详细]
  • Oracle 和 mysql的9点区别【MySQL】
    数据库|mysql教程oracle,Oracle,money,mysql,coun数据库-mysql教程1.组函数用法规则mysql中组函数在select语句中可以随意使用,但在o ... [详细]
  • PHP输出缓冲控制Output Control系列函数详解【PHP】
    后端开发|php教程PHP,输出缓冲,Output,Control后端开发-php教程概述全景网页源码,vscode如何打开c,ubuntu强制解锁,sts启动tomcat慢,sq ... [详细]
  • 用PHP连接MySQL代码的参数说明【PHP】
    后端开发|php教程PHP,连接,MySQL,参数后端开发-php教程代码是这样的:大图标网站源码,怎么在vscode中调试css,ubuntu退出命令行,系统默认开tomcat, ... [详细]
  • React 小白初入门
    推荐学习:React官方文档:https:react.docschina.orgReact菜鸟教程:https:www.runoob.c ... [详细]
  • 【爬虫训练场】:分页爬虫案例设计Demo,Python Flask与MySQL的完美连接
    网站类应用,一定离不开MySQL,所以本案例将带着大家学习一下,通过Flask调用MySQL数据,并实现分页呈现。类被称作蓝图,它是一个存储操作方法的容器,Flask可以通过Blu ... [详细]
  • 知识图谱——机器大脑中的知识库
    本文介绍了知识图谱在机器大脑中的应用,以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例,说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案,如搜索关键词"Marie Curie",会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革,不仅美国的微软必应,中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
author-avatar
请叫她秋嫦
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有