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 ...
随机推荐
- python2/python3 内存中打包/压缩文件
python2:(包含压缩选项,如果只打包,可以调整zipfile.ZIP_DEFLATED) import zipfile import StringIO class InMemoryZip(obj ...
- angular 时间戳转换
.filter('getWeek', function() { return function(input) { var date = new Date(input * 1000); var week ...
- Mybatis第六篇【配置文件和映射文件再解读、占位符、主键生成与获取、Mapper代理】
配置文件和映射文件再解读 映射文件 在mapper.xml文件中配置很多的sql语句,执行每个sql语句时,封装为MappedStatement对象,mapper.xml以statement为单位管理 ...
- Spring - lookup-method方式实现依赖注入
引言 假设一个单例模式的bean A需要引用另外一个非单例模式的bean B,为了在我们每次引用的时候都能拿到最新的bean B,我们可以让bean A通过实现ApplicationContextWa ...
- webservice03#schema#元素属性定义
工具软件XMLSpy 2010 破解版,是非常好的写XMl的工具软件. 1,Schema的好处: Schema出现的目的是通过一个更加合理的方式来编写xml的限制文件(基于xml语法的方式): Sch ...
- Spring Security研究(1)
1, 获取Spring Security的Jar包 :从Spring网站下载页下载或者从Maven中央仓库下载.一个好办法是参考实例应用中包含的依赖库. 2,项目模块: Core - spring ...
- HTML超文本
1.HTML链接 2.HTML表格 3.HTML图像 4.HTML列表 5.HTML块 6.HTML布局 7.HTML表单 1.HTML链接 (1)给文字及图片添加超链接 < html> ...
- Tomcat代码执行漏洞(CVE-2017-12615)的演绎及个人bypass
0x00 漏洞简介 2017年9月19日,Apache Tomcat官方确认并修复了两个高危漏洞. 漏洞CVE编号:CVE-2017-12615和CVE-2017-12616. 其中 远程代码执行漏洞 ...
- mysql、mariadb安装和多实例配置
本文目录:1. mysql单实例安装 1.1 rpm安装mysql 1.2 通用二进制包安装mysql 1.2.1 初始化数据库 1.2.2 安装后的规范化操作 1.3 编译安装 1.3.1 编译安装 ...
- 压缩感知中的lp球:p范数最优化为什么总会导致一个稀疏的解的原因
转自:彬彬有礼. 压缩感知中的lp球:p范数最优化为什么总会导致一个稀疏的解的原因 http://blog.csdn.net/jbb0523/article/details/40268943 题目: ...