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. SpringMVC 构建Restful风格 及问题处理

    基本的请求URL: /person/{id}  GET  得到id的person /person POST      新增person /person/{id}  PUT  更新id的person / ...

  2. MinHook测试与分析(x86下 E8,E9,EB,CALL指令测试,且逆推测试微软热补丁)

    依稀记得第一次接触Hook的概念是在周伟民先生的书中-><<多任务下的数据结构与算法>>,当时觉得Hook的本质就是拦截,就算到现在也是如此认为. 本篇文章是在x86下测 ...

  3. java基础知识3--如何获取资源文件(Java中获取资源文件的url)

    java开发中,常见的resource文件有:.xml,.properties,.txt文件等,后台开发中经常用到读取资源文件,处理业务逻辑,然后返回结果. 获取资源文件的方法说明getResourc ...

  4. Oracle函数之chr

    chr()函数将ASCII码转换为字符:字符 –> ASCII码:ascii()函数将字符转换为ASCII码:ASCII码 –> 字符: 在oracle中chr()函数和ascii()是一 ...

  5. Oracle日期时间操作大全

    本文出自:http://www.cnblogs.com/hl3292/archive/2010/11/03/1868159.html oracle sql日期比较: 共三部分: 第一部分:oracle ...

  6. mapreduce自定义排序(map端1.4步)

    3 3 3 2 3 1 2 2 2 1 1 1 -----------------期望输出 1 1 2 1 2 2 3 1 3 2 3 3 将以上数据进行排序,排序规则是:按照第一列升序排序,如果第一 ...

  7. CSS3 animation-timing-function steps()

    animation-timging-function 主要是控制css动画从开始到结束的速度. linear:线性过渡.等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0) ease:平滑过渡.等 ...

  8. Python 接口测试(四)

    五:python数列化和反序列化 把python的对象编码转换为json格式的字符串,反序列化可以理解为:把json格式 字符串解码为python数据对象.在python的标准库中,专门提供了json ...

  9. django ajax练习

    这几天遇到了django ajax请求出错的问题,总结一下 前端js:我这里创建的是一个字典格式的数据,前端js收到字典之后也是要用字典的形式去解包后台传送过来的数据,比如我下面的写法:data['s ...

  10. Fiddler屏蔽某些url的抓取方法

    在用Fiddler调试网页的时候,可能某些频繁的ajax轮询请求会干扰我们,可以通过以下方法屏蔽某些url的抓取. 在需要屏蔽的url行上右键---->“Filter Now”-----> ...