Babel + gulp 构建

babel + gulp 使用案例

基础使用

1、安装

确认你的项目目录，创建文件夹做为示例项目的根目录

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、创建 gulpfile 文件。

gulpfile 文件里定义一个默认default任务，并使用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 来测试，创建一个User类，包含构造函数和实例方法。

新建 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、运行编译，终端中执行

gulp // 执行默认任务

编译完之后，我们会在babel-gulp-demo/dist目录下查看编译后的文件，发现与babel命令行工具babel-cli编译的结果是统一的。

"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 });  // 使用箭头函数

4、运行编译，终端中执行

gulp // 执行默认任务

编译完之后，我们发现 let 转变为 var ，箭头函数 转变为 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