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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM