Hbuilder中添加Babel自动编译
Hbuilder是一个不错的H5开发IDE。
Babel是EMCAScript最新标准的编译器,很多ES的最新特性都可以在Babel中尝试。
如果可以有办法在Hbuilder中直接使用ES6,并通过Babel自动转化为ES5,那么对于使用ES6+Hbuilder进行开发调试将会非常方便。
简单做了些配置,可以通过以下步骤达到目的。
- Hbuilder配置 - 打开ES6


- 安装NPM
- 下载NPM安装
- 通过NPM安装babel-cli
npm install --global babel-cli
- 安装babel preset
npm install --global babel-preset-env
- 配置Hbuilder中的预编译器设置



根据实际情况,填写以上信息。
- 测试JS文件保存,自动生成babel转换后的JS代码
每次项目中的JS文件保存后,都会将编译后的代码文件放在项目中dist/下。
以上步骤,在windows环境下验证。
Hbuilder中添加Babel自动编译的更多相关文章
- MyEclipse 中 添加 js自动完成模版
MyEclipse 中 添加 js自动完成模版: window>preference>MyEclipse>Files and Editors>JavaScript>Edi ...
- 小tips:Hbuilder编辑器开启less自动编译为css的方法
1.首先,依次打开菜单栏->工具->预编译器设置,打开后是这样的: 2.然后点击新建. 3.文件后缀为.less触发命令地址就是lessc.cmd所在的地址,先用npm全局安装less, ...
- 利用babel自动编译es6文件
一.检查File-Watchers中Babel的Arguments,有一项presets的设置,把他更改为=es2015,详细设置如下: $FilePathRelativeToProjectRoot$ ...
- IDEA中添加javap反编译
- 怎样在vs2013和vs2015中实现自动编译sass
Visual Studio不论是2013版本还是2015版本要自动编译都需要添加扩展. 添加扩展的方法,路径“工具”->“扩展和更新”,在打开的窗口“搜索”你需要的扩展根据提示“下载”和“安装” ...
- 使用ant自动编译安卓项目并签名
准备阶段: 1.下载ant,jdk,android sdk ant下载地址:ant.apache.org/bindownload.cgi 2. 设置环境变量 ANT_HO ...
- ant自动编译打包android项目
源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/antdemo.zip Android打包APK的流程如下: 下面我们开始尝试使用ant进行ap ...
- 【ts】 VSCode自动编译TypeScript终端报错
一.点击终端--运行任务--选择tsc:监视 - tsconfig.json后,终端报出了如下错误:error TS5058: The specified path does not exist 在网 ...
- WebStorm ES6 语法支持设置&babel使用及自动编译
一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g ...
随机推荐
- XML解析【介绍、DOM、SAX详细说明、jaxp、dom4j、XPATH】
什么是XML解析 前面XML章节已经说了,XML被设计为"什么都不做",XML只用于组织.存储数据,除此之外的数据生成.读取.传送等等的操作都与XML本身无关! XML解析就是读取 ...
- java基础解析系列(六)---深入注解原理及使用
java基础解析系列(六)---注解原理及使用 java基础解析系列(一)---String.StringBuffer.StringBuilder java基础解析系列(二)---Integer ja ...
- 西邮linux兴趣小组2014纳新免试题(三)
[第三关] 题目 http://sortsth.sinaapp.com/ 分析 查看网页源码,得知题目让找出6种排序算法,每次刷新或提交序列都变化. 15种算法清单: CountingSort ...
- 九月 26, 2017 10:18:14 上午 com.sun.jersey.server.impl.application.RootResourceUriRules <init> 严重: The ResourceConfig instance does not contain any root resource classes.
Tomcat启动错误:九月 26, 2017 10:18:14 上午 com.sun.jersey.server.impl.application.RootResourceUriRules <i ...
- snsapi_base和snsapi_userinfo
1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回调页(往往是业务页面) 2.以snsap ...
- “一切都是消息”--MSF(消息服务框架)入门简介
“一切都是消息”--这是MSF(消息服务框架)的设计哲学. MSF的名字是 Message Service Framework 的简称,中文名称:消息服务框架,它是PDF.NET框架的一部分. 1,M ...
- 解决linux下部署科大讯飞时的版本过低问题
在将项目部 署到阿里云服务器之后,需要将科大讯飞SDK下的libmsc64.so依赖库文件上传至/usr/java/jdk1.8.0_121/jre/lib/amd64路径下 在Windo ...
- JS -- The Scope Chain 作用域链
The Scope Chain JavaScript is a lexically scoped language: the scope of a variable can be thought of ...
- CDH入门
cloudera(CDH)官网介绍:安装包.离线包该如何下载.官方文档等介绍http://www.aboutyun.com/thread-8908-1-1.html(出处: about云开发) 进入C ...
- apollo实现c#与android消息推送(二)
安装完成apache apollo后,org.eclipse.paho是很方便的测试软件,下来介绍paho的安装和使用 2. 搭建paho: a 下载 org.eclipse.paho.ui.app- ...