babel + gulp 使用案例
基礎(chǔ)使用
1、安裝
確認(rèn)你的項(xiàng)目目錄，創(chuàng)建文件夾做為示例項(xià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 文件里定義一個(gè)默認(rèn)default任務(wù)算途，并使用babel和babel插件集編譯一個(gè)示例文件。
新建 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 來(lái)測(cè)試嘴瓤，創(chuàng)建一個(gè)User類(lèi)，包含構(gòu)造函數(shù)和實(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、運(yùn)行編譯磁玉，終端中執(zhí)行
gulp // 執(zhí)行默認(rèn)任務(wù)
編譯完之后停忿，我們會(huì)在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')) // 合并輸出為一個(gè) bundle.js
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('dist'))
);
2、安裝依賴(lài)
npm install gulp gulp-sourcemaps gulp-concat --save-dev
3时迫、再新建一個(gè)示例文件 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、運(yùn)行編譯掠拳，終端中執(zhí)行
gulp // 執(zhí)行默認(rèn)任務(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