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文件,里面的内容如下:

--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文件,如下:

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

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

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

最后,我们再在根路径下新建一个.babelrc文件,内容如下:

因为我是以D盘的ES6文件夹作为的根路径,所以经过上面的步骤,ES6文件夹下现在是这样的:

好了,再在根路径下创建一个script文件夹,里面新建一个demo.js用于检验,配置是否成功。

demo.js里的内容为:

//直接在参数里赋值,属于ES6的规范,如y=‘world‘
function log(x, y = ‘world‘){
    console.log(x, y);
};
log(‘hello‘); 

在cmd环境(D:\ES6下)输入gulp + 回车,运行。

如下:

这样就成功啦。你会发现在根路径下多了一个dist文件夹,里面还多了一个demo.js。

不错,这个js文件,就是转换为ES5的结果。

如下:

有了这个神器,我们就可以学习ES6咯。

但,为了让我们学习ES6时,效率更高,我们再来完善一下gulpfile.js里的配置内容。

因为,我们在学习ES6时,难免会发生语法之类的错误,当我们利用gulp去转换时,一旦遇见错误,就会报错且停止运行gulp。且,gulp自身报的错,无关紧要,在实际操作中,根本不知道这个错误是什么,非常影响效率。

So,我们可以利用stream-combiner2来解决这一问题。当gulp遇见错误时,利用stream-combiner2来捕获错误信息,并准确地告诉我们错误在哪。这样不就提高效率了么?

如下:

//引入gulp模块
var gulp = require(‘gulp‘);
//引入gulp-babel模块,用于转换ES6为ES5
var babel = require(‘gulp-babel‘);
//引入stream-combiner2捕获错误信息
var combiner = require(‘stream-combiner2‘);
//捕捉异常函数
var handleError = function(err){
    console.log(‘\n‘);
    console.log(‘Error!‘);
    console.log(‘fileName: ‘ + err.fileName);
    console.log(‘lineNumber: ‘ + err.loc.line);
    console.log(‘message: ‘ + err.message);
    console.log(‘plugin: ‘ + err.plugin);
    console.log(‘\n‘);
};
//默认任务
gulp.task(‘default‘, function(){
    //这里是将script文件下的js转换为ES5,并添加到dist文件夹中
    var combined = combiner.obj([
        gulp.src(‘script/*.js‘),
        babel(),
        gulp.dest(‘dist‘)
    ]);
    //利用combined捕获异常
    combined.on(‘error‘, handleError);
});     

entirCode

测试:倘若我们将script/demo.js改为如下这样,并取名为demo1.js:

因为我们引入了stream-combiner2模块,所以你得安装它

(npm install --save-dev stream-combiner2)

安装完成后,运行gulp,得如下结果:

Nice。出现问题不但没有终止gulp,且在最后,打印出了具体错误信息,这样我们检测错误就非常方便啦。

但是,这是在测试代码较少的情况下,如果代码数量很多呢?这字体不便于我们发现哦。所以为了更加完美,提高学习效率,我们可以利用gulp-util模块来指定字体颜色。这样,当出错信息我们标记为红色,不就显而易见了么?

修改代码如下:

//引入gulp模块
var gulp = require(‘gulp‘);
//引入gulp-babel模块,用于转换ES6为ES5
var babel = require(‘gulp-babel‘);
//引入stream-combiner2捕获错误信息
var combiner = require(‘stream-combiner2‘);
//引入gulp-util模块,用于实现自定义颜色的log
var gutil = require(‘gulp-util‘);
//捕捉异常
var handleError = function(err){
    var colors = gutil.colors;
    console.log(‘\n‘);
    gutil.log(colors.red(‘Error!‘));
    gutil.log(‘fileName: ‘ + colors.red(err.fileName));
    gutil.log(‘lineNumber: ‘ + colors.red(err.loc.line));
    gutil.log(‘message: ‘ + err.message);
    gutil.log(‘plugin: ‘ + colors.yellow(err.plugin));
};
//默认任务
gulp.task(‘default‘, function(){
    //这里是将script文件下的js转换为ES5,并添加到dist文件夹中
    /*
    gulp.src(‘script/*.js‘)
        .pipe(babel())
        .pipe(gulp.dest(‘dist‘));
    */
    var combined = combiner.obj([
        gulp.src(‘script/*.js‘),
        babel(),
        gulp.dest(‘dist‘)
    ]);
    combined.on(‘error‘, handleError);
});     

entireCode

引入了gulp-util模块,所以你得安装它(npm install --save-dev gulp-util)

安装好后,再次运行gulp。

得如下结果:

好了,完美程度直逼100%。

为了更加完美,不用我们每次都手动去转换ES6,我们可以利用gulp-watch-path模块去监听文件,一旦文件变换,就转换。注:引入了gulp-watch-path模块,所以你得安装!!

如下:

//引入gulp模块
var gulp = require(‘gulp‘);
//引入gulp-babel模块,用于转换ES6为ES5
var babel = require(‘gulp-babel‘);
//引入stream-combiner2捕获错误信息
var combiner = require(‘stream-combiner2‘);
//引入gulp-util模块,用于实现自定义颜色的log
var gutil = require(‘gulp-util‘);
//引入gulp-watch-path模块,用于监听
var watchPath = require(‘gulp-watch-path‘);
//捕捉异常
var handleError = function(err){
    var colors = gutil.colors;
    console.log(‘\n‘);
    gutil.log(colors.red(‘Error!‘));
    gutil.log(‘fileName: ‘ + colors.red(err.fileName));
    gutil.log(‘lineNumber: ‘ + colors.red(err.loc.line));
    gutil.log(‘message: ‘ + err.message);
    gutil.log(‘plugin: ‘ + colors.yellow(err.plugin));
};
//默认任务
gulp.task(‘default‘, function(){
    gulp.watch(‘script/*.js‘, function(event){
        var paths = watchPath(event, ‘script/‘, ‘dist/‘);
        var combined = combiner.obj([
            gulp.src(paths.srcPath),
            babel(),
            gulp.dest(paths.distDir)
        ]);
        combined.on(‘error‘, handleError);
    });
});     

entireCode

时间: 2024-10-25 15:44:40

ES6转换器之Babel的相关文章

Babel 转码器 § es6转换es5

Babel 转码器 § es6转换es5 实时转码 /  Repl  -babel-node / babel-register(自动转码引入babel-register模块) 配置文件.babelrc 1.Babel 的配置文件是.babelrc,存放在项目的根目录下.使用 Babel 的第一步,就是配置这个文件. 该文件用来设置转码规则和插件,基本格式如下. { "presets": [], "plugins": [] } 2.presets字段设定转码规则,官方

ES6入门一:ES6简介及Babel转码器

ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什么关系? 1996年11月,JavaScript的创造者——Netscape公司,决定将JavaScript提交给国际标准化组织ECMA,希望JavaScript这种语言能够成为国际标准. 1997年,ECMA发布262号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言

让nodeJS支持ES6的词法----babel的安装和使用

要使用Babel, 我们需要nodeJS的环境和npm, 主要安装了nodeJS, npm就默认安装了 , 现在安装nodeJS很简单了, 直接下载安装就好了: 安装es-checker 在使用Babel之前 , 我们要先检测一下当前node对es6的支持情况, 我们使用先es-checker, 命令行下执行: npm -g install es-checker es-checker安装完毕以后, 命令行执行:es-checker , 如下图, 我的node环境版本是v4.4.3, 支持64%哦

用 Webpack 和 ES6 转换快速开发 Rails 的富客户端

Fast Rich Client Rails Development With Webpack and the ES6 Transpiler 有更好的方式把 JavaScript 生态引入 Rails. 你有没有: 想知道是否有更好的方式在现有 Ruby on Rails 工程下使用现代 JavaScript 客户端框架? 烦恼怎样整合那些被打包成"模块"的 JavaScript 库和例子? 发现在全局命名空间下乱挂垃圾的弊端. 听说过 ES6 (又叫 Harmony),下一代 Jav

VScode(二):ES6 & Nodejs & webpack & babel

目录 前言 1 VScode配置安装 2 Nodejs配置安装 3 VScode调试ES6 3.1 扩展插件安装 3.1.1 VScode插件 3.1.2 npm插件 3.2 环境配置 3.2.1 配置package.json 3.2.2 配置webpack.config.js 3.2.3 配置index.js和index.html 3.2.4 项目打包 4 项目执行 4.1 依赖安装 4.2 项目运行 4.2.1 webpack项目打包 4.2.2 webpack-dev-server热加载

WPF转换器之通用转换器

WPF中的转换器是一个非常好的数据类型转换解决方案,实用和强大, 它的作用是将源数据转换为WPF自身需要的类型,对数据实体没有侵略性,会在项目工程中频繁使用.所以掌握转换器是WPF开发的必备技能. 我刚接触转换器的时候,没有考虑通用性,每次遇到一个转换需求都会去创建一个新的转换器,久而久之,项目中的转换器已多如牛毛 这当然是我无法容忍的,我决定用一种通用转换器来代替绝大部分性质相同的转换操作,通过约定一套参数规则来适应不同的转换场景,达到转换器复用的目的. 转换器分为两种,IValueConve

PDF转换器之怎样给PDF文件添加水印?

PDF添加水印的方法:PDF添加水印的方法有哪些?大家都知道想要给PDF文件添加水印不是一件简单的事情,没有找到好的方法只会降低工作的效率,相信很多小伙伴也在找适合的方法,今天就来给大家分享这个方法,一起来学习一下吧.借助专业的PDF添加水印的软件:PDF转换器可以轻松的给PDF文件添加水印哦,下面就来给大家介绍一下如何通过迅捷PDF转换器给PDF文件添加水印.一.打开软件,软件打开之后就可以看到[PDF的其他操作]这一个大的功能板块,然后我们可以选择下面的[PDF的添加水印]然后点击:二.我们

面试官: 聊一聊Babel

点击关注本公众号获取文档最新更新,并可以领取配套于本指南的 <前端面试手册> 以及最标准的简历模板. 前言 Babel 是现代 JavaScript 语法转换器,几乎在任何现代前端项目中都能看到他的身影,其背后的原理对于大部分开发者还属于黑盒,不过 Babel 作为一个工具真的有了解背后原理的必要吗? 如果只是 Babel 可能真没有必要,问题是其背后的原理在我们开发中应用过于广泛了,包括不限于: eslint jshint stylelint css-in-js prettier jsx v

ES6转ES5:Gulp+Babel

目标: ES6代码转成ES5 对转换后的ES5进行压缩 以上步骤自动监控执行 步骤: 1.安装插件 在命令行中定位到项目根目录 安装全局 Gulp npm install -g gulp 安装项目中使用的 Gulp npm install --save-dev gulp 安装 Gulp 上 Babel 的插件 npm install --save-dev gulp-babel 安装 Babel 上将 ES6 转换成 ES5 的插件 npm install --save-dev babel-pre