码迷,mamicode.com
首页 > 其他好文 > 详细

Hbuilder中添加Babel自动编译

时间:2017-10-29 16:42:47      阅读:225      评论:0      收藏:0      [点我收藏+]

标签:编译   span   简单   9.png   pre   编译器   很多   log   com   

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自动编译

标签:编译   span   简单   9.png   pre   编译器   很多   log   com   

原文地址:http://www.cnblogs.com/daition/p/7750290.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!