你的位置:首页 > 软件开发 > Java > ES6转换器之Babel

ES6转换器之Babel

发布时间:2016-06-13 00:00:05
ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5。我这里用的是Gulp + Bable的形式来将ES6转换为ES5的。前提:  (1)、Gulp和Bable都是基于node环境,如果不知道node,建议先看看”初探nod ...

ES6转换器之Babel

ES6部分功能没有支持,所以想学习ES6,得先有个转换器,就是将ES6的代码转换为ES5。

我这里用的是Gulp + Bable的形式来将ES6转换为ES5的。

前提:

  (1)、Gulp和Bable都是基于node环境,如果不知道node,建议先看看”初探nodeJS”。

  (2)、说到Gulp,如果你还不是很清楚的话,建议先了解Gulp(”细说Gulp”)。

OK,从无到有。接下来,我们就一步步搭建这个‘转换神器’吧。

Get started

因为是Gulp + Bable的形式,所以得先安装gulp和Bable模块。借助npm轻松搞定。

不过为了今后便于查看Gulp安装的相关信息,我们可以在项目根路劲中建立一个package.json文件,里面的内容如下:

ES6转换器之Babel 

--name--:项目名称(自己取,如上的"gulpPro")

--devDependencies--:用于记录项目依赖模块。

好了,下面开始安装吧。

1、  安装项目中的Gulp

   npm install --save-dev gulp

2、  安装Gulp上的Bable插件

   npm install --save-dev gulp-babel

3、  安装ES6转换ES5插件

   npm install --save-dev babel-preset-es2015

好了,模块安装完后,我们再打开刚才我们创建的package.json文件,如下:

ES6转换器之Babel 

可以清晰地在devDpendencies中,看到我们刚才安装的模块依赖。

接下来,配置gulpfile.js的步骤就跟”细说Gulp”中的”小试牛刀之压缩Javascript”思路差不多。这里我们就依葫芦画瓢,得如下配置内容:

//引入gulp模块var gulp = require('gulp');//引入gulp-babel模块,用于转换ES6为ES5var babel = require('gulp-babel');//默认任务gulp.task('default', function(){  //这里是将script文件下的js转换为ES5,并添加到dist文件夹中  gulp.src('script/*.js')    .pipe(babel())    .pipe(gulp.dest('dist'));});

原标题:ES6转换器之Babel

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录