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. Oracle-SQL-按月统计自助终端交易量

    SQL实现的目标: 基本情况 现金交易情况 转账情况 转账交易情况(明细) 其它业务情况 交易量汇总 日均交易量 交易金额 绩效情况(万元) 支行名 支行号 所属网点 网点号 管理员帐户 管理员 终端 ...

  2. hadoop各个类及其作用

    1.基础包(包括工具包和安全包) 包括工具和安全包.其中,hdfs.util包含了一些HDFS实现需要的辅助数据结构:hdfs.security.token.block和hdfs.security.t ...

  3. GCD之异步同步体会

    前面的博文也有写到同步异步,可能是看他人的博文,自己没有实验,感觉理解不深,所以就敲了些代码比较一下串行.并行分别对应的同步.异步. 1.首先创建串行.并行线程队列 1 2 dispatch_queu ...

  4. python 脚本开发实战-当当亚马逊图书采集器转淘宝数据包

    开发环境python2.7.9 os:win-xp exe打包工具pyinstaller 界面tkinter ============================================= ...

  5. java学习——java按值传递和按址传递

    先复制一个面试/笔试的题: 当一个对象被当作参数传递到一个方法后,此方法可改变这个对象的属性,并可返回变化后的结果,那么这里到底是值传递还是引用传递? 答案: 是值传递.Java语言的方法调用只支持参 ...

  6. 《effective Go》读后记录

    一个在线的Go编译器 如果还没来得及安装Go环境,想体验一下Go语言,可以在Go在线编译器 上运行Go程序. 格式化 让所有人都遵循一样的编码风格是一种理想,现在Go语言通过gofmt程序,让机器来处 ...

  7. 【BZOJ】1015 [JSOI2008]星球大战starwar(并查集+离线处理)

    Description 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过 ...

  8. Angular JS的正确打开姿势——简单实用(下)

        前  言 絮叨絮叨 继上篇内容,本篇继续讲一下这款优秀并且实用的前端插件AngularJS. 六. AngularJS中的HTTP 6.1先看看JQuery的Ajax写法 $ajax({ me ...

  9. 关于xamarin.forms 中 list 的loadmore

    前言 最近几天在研究上拉加载啊,下拉刷新啊什么的.然而坑爹的事情总是那么多.在xamarin.forms中,list自带的,并没有上拉加载的这个属性(难道当初他们封装方法时,就不会想到数据多了会咋整吗 ...

  10. 简单Elixir游戏服设计- 游戏玩法介绍

    抄以前的,做了点修改. 到目前为止,我们完成了玩家的数据和进程建模,现在介绍游戏玩法. 为什么我们还不做客户端接入.协议指定呢?为什么还没有网关和数据存储呢.在我接手的游戏, 这些通常已经定下来了,我 ...