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

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

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

一、建立一个空的前端项目

可使用webStorm等前端工具建立一个空的项目便可。

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

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

二、建立npm的配置文件package.json

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

{}

三、安装babel-cli

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

在项目根目录下执行：

$ npm install babel-cli --save-dev

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

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

四、下载es2015解释器

若是要构建到es5语法，就须要下载es2015的解释器，执行：

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

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

五、建立babel的配置文件

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

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

6，建立npm build命令

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

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

六、构建

$ npm run build

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

"use strict";

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

 

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

一、安装gulp

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

说明：若是是本身项目使用，第一个全局安装就能够了；可是本地安装能够方便与其余人拷贝走项目后，其余人就不须要本身安装gulp就能编译工程了

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

二、安装gulp-babel

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

$ npm install gulp-babel --save-dev

三、配置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

四、实现实时编译

改造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 也可。