使用gulp+bebal实现前端自动化es6转es5的构建

说明：es6语法已经越来越普及，但是一些低版本的浏览器不支持es6的语法特性，所以我们在开发完前端项目后，往往需要统一把前端es6的代码编译成es5的代码。本文介绍的就是如何手动和自动的把es6转成es5的方法。本文前提：需要提前安装好nodejs环境，能够使用npm命令。如果不了解如果配置npm，可以查看笔者前几次的博文。

使用babel来手动构建es5的方式：

1、创建一个空的前端项目

可以使用webStorm等前端工具创建一个空的项目即可。

并创建src/main.js，文件内容如下，其中使用了es6语法胖箭头函数：

(()=>{
console.log(es6 test !);
})();

2、创建npm的配置文件package.json

项目根目录下创建package.json文件，里面只写一个{}即可：

{}

3、安装babel-cli

babel-cli可以把es6语法转成大多数浏览器所能识别的es5语法。

在项目根目录下执行：

$ npm install babel-cli --save-dev

执行后，项目中会自动创建node_modules文件夹；

package.json文件中会产生devDependencies节点，节点中会有“babel-cli”字样的属性。

4、下载es2015解释器

如果要构建到es5语法，就需要下载es2015的解释器，执行：

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

执行后，package.json文件devDependencies节点中会创建"babel-preset-es2015"字样的属性。

5、创建babel的配置文件

项目中创建.babelrc文件，内容：

{"presets" : [["es2015"]]}

6，创建npm build命令

在package.json文件增加script节点，表示可以使用npm run build命令执行以下语句

"script" : {
"build" : "babel src -d assets/js"
}

6、构建

$ npm run build

执行后，项目中会产生assets/js/main.js文件，里面内容就是es5语法了，内容：

"use strict";

(function()(){
    console.log(es6 test !);
})();

使用gulp + babel 自动化构建方法：

1、安装gulp

执行以下两句。分别是全局安装和本地安装。

说明：如果是自己项目使用，第一个全局安装就可以了；但是本地安装可以方便与其他人拷贝走项目后，其他人就不需要自己安装gulp就能编译工程了

$ npm install gulp-cli --global
$ npm install gulp --save-dev

2、安装gulp-babel

gulp-babel是gulp和babel集成的工具。执行以下：

$ npm install gulp-babel --save-dev

3、配置gulp配置文件

项目根目录下创建gulpfile.js。

const gulp = require('gulp');
const gulp = require('gulp-babel');

gulp.task('default', ['babel']);

gulp.task('babel', function(){
    return gulp.src('src/*.js')
        .pipe(babel({
            presets : ['es2015']
        }))
        .pipe(gulp.desc('assets/js'))
})        

然后每次执行一下以下命令就可以实现编译了，执行后会把编译后的js文件放在项目中的assets/js文件夹下，

$ gulp

4、实现实时编译

改造gulpfile.js，如下：

const gulp = require('gulp');
const gulp = require('gulp-babel');

gulp.task('default', ['watch']);

gulp.task('babel', function(){
    return gulp.src('src/*.js')
        .pipe(babel({
            presets : ['es2015']
           }))
        .pipe(gulp.desc('assets/js'))
});

gulp.task('watch', function(){
    gulp.watch('src/*.js', ['babel']);
});    

然后打开项目后执行一次以下命令即可，gulp就会监听工程，每次js有变化都会自动的实时编译。

$ gulp

当然，如果不想实时编辑，执行手动编辑，执行 $ gulp babel 也可。