Hbuilder是一个不错的H5开发IDE。

Babel是EMCAScript最新标准的编译器,很多ES的最新特性都可以在Babel中尝试。

如果可以有办法在Hbuilder中直接使用ES6,并通过Babel自动转化为ES5,那么对于使用ES6+Hbuilder进行开发调试将会非常方便。

简单做了些配置,可以通过以下步骤达到目的。

  1. Hbuilder配置 - 打开ES6

  2. 安装NPM
    1. 下载NPM安装
    2. 通过NPM安装babel-cli

      npm install --global babel-cli

    3. 安装babel preset

      npm install --global babel-preset-env

  3. 配置Hbuilder中的预编译器设置

    根据实际情况,填写以上信息。

  4. 测试JS文件保存,自动生成babel转换后的JS代码

    每次项目中的JS文件保存后,都会将编译后的代码文件放在项目中dist/下。

以上步骤,在windows环境下验证。

Hbuilder中添加Babel自动编译的更多相关文章

  1. MyEclipse 中 添加 js自动完成模版

    MyEclipse 中 添加 js自动完成模版: window>preference>MyEclipse>Files and Editors>JavaScript>Edi ...

  2. 小tips:Hbuilder编辑器开启less自动编译为css的方法

    1.首先,依次打开菜单栏->工具->预编译器设置,打开后是这样的: 2.然后点击新建. 3.文件后缀为.less触发命令地址就是lessc.cmd所在的地址,先用npm全局安装less, ...

  3. 利用babel自动编译es6文件

    一.检查File-Watchers中Babel的Arguments,有一项presets的设置,把他更改为=es2015,详细设置如下: $FilePathRelativeToProjectRoot$ ...

  4. IDEA中添加javap反编译

  5. 怎样在vs2013和vs2015中实现自动编译sass

    Visual Studio不论是2013版本还是2015版本要自动编译都需要添加扩展. 添加扩展的方法,路径“工具”->“扩展和更新”,在打开的窗口“搜索”你需要的扩展根据提示“下载”和“安装” ...

  6. 使用ant自动编译安卓项目并签名

     准备阶段: 1.下载ant,jdk,android sdk        ant下载地址:ant.apache.org/bindownload.cgi 2. 设置环境变量      ANT_HO ...

  7. ant自动编译打包android项目

    源代码及可执行文件下载地址:http://files.cnblogs.com/rainboy2010/antdemo.zip Android打包APK的流程如下:  下面我们开始尝试使用ant进行ap ...

  8. 【ts】 VSCode自动编译TypeScript终端报错

    一.点击终端--运行任务--选择tsc:监视 - tsconfig.json后,终端报出了如下错误:error TS5058: The specified path does not exist 在网 ...

  9. WebStorm ES6 语法支持设置&babel使用及自动编译

    一.语法支持设置 Preferences > Languages & Frameworks > JavaScript 二.Babel安装 1.全局安装 npm install -g ...

随机推荐

  1. XML解析【介绍、DOM、SAX详细说明、jaxp、dom4j、XPATH】

    什么是XML解析 前面XML章节已经说了,XML被设计为"什么都不做",XML只用于组织.存储数据,除此之外的数据生成.读取.传送等等的操作都与XML本身无关! XML解析就是读取 ...

  2. java基础解析系列(六)---深入注解原理及使用

    java基础解析系列(六)---注解原理及使用 java基础解析系列(一)---String.StringBuffer.StringBuilder java基础解析系列(二)---Integer ja ...

  3. 西邮linux兴趣小组2014纳新免试题(三)

    [第三关] 题目 http://sortsth.sinaapp.com/ 分析 查看网页源码,得知题目让找出6种排序算法,每次刷新或提交序列都变化. 15种算法清单: CountingSort     ...

  4. 九月 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 ...

  5. snsapi_base和snsapi_userinfo

    1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回调页(往往是业务页面) 2.以snsap ...

  6. “一切都是消息”--MSF(消息服务框架)入门简介

    “一切都是消息”--这是MSF(消息服务框架)的设计哲学. MSF的名字是 Message Service Framework 的简称,中文名称:消息服务框架,它是PDF.NET框架的一部分. 1,M ...

  7. 解决linux下部署科大讯飞时的版本过低问题

    在将项目部     署到阿里云服务器之后,需要将科大讯飞SDK下的libmsc64.so依赖库文件上传至/usr/java/jdk1.8.0_121/jre/lib/amd64路径下   在Windo ...

  8. JS -- The Scope Chain 作用域链

    The Scope Chain JavaScript is a lexically scoped language: the scope of a variable can be thought of ...

  9. CDH入门

    cloudera(CDH)官网介绍:安装包.离线包该如何下载.官方文档等介绍http://www.aboutyun.com/thread-8908-1-1.html(出处: about云开发) 进入C ...

  10. apollo实现c#与android消息推送(二)

    安装完成apache apollo后,org.eclipse.paho是很方便的测试软件,下来介绍paho的安装和使用 2. 搭建paho: a 下载 org.eclipse.paho.ui.app- ...