使用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 也可。