gulp-babel使用

各大瀏覽器廠商對es2015功能支持不徹底,等到所有支持會等很長時間,若是如今使用es2015,能夠選擇babel一個將ES6/ES7寫的代碼轉換爲ES5代碼的編譯器.

咱們選擇使用gulp自動化編譯生成es5代碼.

假設你已經安裝過了nodejs.

配置開發環境:

1. 創建工程目錄:  

$mkdir test && cd test

 

2. 新建工程配置文件package.json 

$npm init

3. 安裝gulp工具

$npm install --save-dev gulp gulp-babel gulp-concat gulp-sourcemaps babel-preset-es2015

 

4. 新建gulp配置文件

$vim gulpfile.js

 

寫入代碼gulpfile.js:

const gulp = require("gulp");

const sourcemaps = require("gulp-sourcemaps");

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

const concat = require("gulp-concat");

 

gulp.task('default', () =>

    gulp.src('src/**/*.js')

        .pipe(babel({

            presets: 'es2015'

        }))

        .pipe(gulp.dest('dist'))

);

 

//生成sourcemaps

 

gulp.task('all', () =>

    gulp.src('src/**/*.js')

        .pipe(sourcemaps.init())

        .pipe(babel({

            presets: 'es2015'

        }))

        .pipe(concat('all.js'))

        .pipe(sourcemaps.write('.'))

        .pipe(gulp.dest('dist'))

);

View Code  

 

5. 測試是否配置成功

mkdir src && cd src && vim app.js

 

寫入代碼:

function f() { 

    let x;

    {

      // okay, block scoped name

      const x = "sneaky";

      // error, const

      //x = "foo";

console.log(x);

    }

    // okay, declared with `let`

    x = "bar";

    // error, already declared in block

    //let x = "inner";

    console.log(x);

}

 

f();

View Code

 

6.執行

$gulp

 

會自動生成dest目錄,包含app.js文件,是轉化過的js.恭喜你已經學會!