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. Winfrom 简单的安卓手机屏幕获取和安卓简单操作

    为啥我要做这个东西了,是因为经常要用投影演示app ,现在有很多这样的软件可以把手机界面投到电脑上 ,但都要安装,比如说360的手机助手,我又讨厌安装,于是就自己捣鼓了下 做了这个东西, 实现了以下简 ...

  2. JavaScript配合button.onclick()使用总结

    Html加载顺序是从上往下加载,如果script中含有引用js脚本,则应该将此script放在head标签里面,这样可是保证此页面都可以引用js脚本内容.如果想在script中设置button.onc ...

  3. 初识oracle存储过程

    参见:http://www.cnblogs.com/linjiqin/archive/2011/04/16/2018411.html 1.存储过程的语法结构: CREATE OR REPLACE PR ...

  4. 【个人笔记】《知了堂》express模块

    NPM  包管理器 Node package module  ==>简称npm 类似的bower 安装express 1.全局Npm install express -g 2.项目中安装 项目中 ...

  5. Java钉钉开发_01_开发前的准备

    源码已上传GitHub:传送门 一.准备事项 1.1  一个能在公网上访问的项目: 参见:Java微信开发_02_本地服务器映射外网 1.2  一个钉钉账号 去注册 1.3 创建一个应用 登录钉钉后台 ...

  6. PHP常用数组(Array)函数整理

    整理了一份PHP开发中数组操作大全,包含有数组操作的基本函数.数组的分段和填充.数组与栈.数组与列队.回调函数.排序.计算.其他的数组函数等. 一.数组操作的基本函数 数组的键名和值 array_va ...

  7. vue语法之拼接字符串

    先来一行代码: <div class="swiper-slide" v-for="item in message"> <img v-bind: ...

  8. python urllib、urlparse、urllib2、cookielib

    1.urllib模块 1.urllib.urlopen(url[,data[,proxies]]) 打开一个url的方法,返回一个文件对象,然后可以进行类似文件对象的操作.本例试着打开google i ...

  9. MVC中View界面数据呈现示例

    @using System.Text; @model List<MvcShopping.Models.ProductCategory> @{ ViewBag.Title = "测 ...

  10. 初学者易上手的SSH-struts2 02Action获取表单数据-通配符

    在上一章中,我们已经搭建好了struts2的一个开发环境,那么这一章就来做一个简单的登录功能,以及介绍和使用struts2里面一个重要的东西-通配符. 第一步,在WebContent下面新建一个log ...