babel + gulp 使用案例

基礎(chǔ)使用

1、安裝

確認你的項目目錄，創(chuàng)建文件夾做為示例項目的根目錄

mkdir /你的工作目錄/babel-gulp-demo
cd /你的工作目錄/babel-gulp-demo
npm init
npm install gulp -g
npm install gulp gulp-babel babel-preset-es2015 --save-dev

2、創(chuàng)建 gulpfile 文件。

gulpfile 文件里定義一個默認default任務(wù)，并使用babel和babel插件集編譯一個示例文件。

新建 babel-gulp-demo/gulpfile.js 文件, 如下：：

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

gulp.task('default', () =>
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'))
);

3、示例文件

使用 class 來測試，創(chuàng)建一個User類，包含構(gòu)造函數(shù)和實例方法。

新建 babel-gulp-demo/src/app.js 文件，如下：

class User{
    constructor(id, name, age){
        this.id = id;
        this.name = name;
        this.age = age;
    }

    say(){
        return `I am ${this.name}, ${this.age} old`;
    }
}

4、運行編譯，終端中執(zhí)行

gulp // 執(zhí)行默認任務(wù)

編譯完之后，我們會在babel-gulp-demo/dist目錄下查看編譯后的文件，發(fā)現(xiàn)與babel命令行工具babel-cli編譯的結(jié)果是統(tǒng)一的。

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var User = function () {
    function User(id, name, age) {
        _classCallCheck(this, User);

        this.id = id;
        this.name = name;
        this.age = age;
    }

    _createClass(User, [{
        key: "say",
        value: function say() {
            return "I am " + this.name + ", " + this.age + " old";
        }
    }]);

    return User;
}();

生成 Source Map

1、修改 gulpfile 文件

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(sourcemaps.init())
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(concat('bundle.js'))         // 合并輸出為一個 bundle.js
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('dist'))
);

2、安裝依賴

npm install gulp gulp-sourcemaps gulp-concat --save-dev

3、再新建一個示例文件 demo.js

新建 babel-gulp-demo/src/demo.js 文件，如下：

// demo1
for(let i = 0; i < 10; i++){                   // 使用 let
    console.log('i :',i);
}
console.log('i :',i);

// demo2
[1,2,3].map((item)=>{ return item * item });  // 使用箭頭函數(shù)

4、運行編譯，終端中執(zhí)行

gulp // 執(zhí)行默認任務(wù)

編譯完之后，我們發(fā)現(xiàn) let 轉(zhuǎn)變?yōu)?var ，箭頭函數(shù) 轉(zhuǎn)變?yōu)?function。

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var User = function () {
    function User(id, name, age) {
        _classCallCheck(this, User);

        this.id = id;
        this.name = name;
        this.age = age;
    }

    _createClass(User, [{
        key: "say",
        value: function say() {
            return "I am " + this.name + ", " + this.age + " old";
        }
    }]);

    return User;
}();
'use strict';

// demo1
for (var _i = 0; _i < 10; _i++) {
    console.log('i :', _i);
}
console.log('i :', i);

// demo2
[1, 2, 3].map(function (item) {
    return item * item;
});
//# sourceMappingURL=bundle.js.map