gulp 如何运用 babel7 来打包项目中 es6 的新特性

什么是 babel ? 在前端项目中他能做什么了？

Babel 是一个工具链，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。以下是 Babel 可以做的主要事情：

• 转换语法
• 源代码转换(codemods)

简而言之，在前端开发过程中，大家会用很多 es6 的新特性，比如箭头函数、class、解构、Promise、async / await等。这些新的特性，简洁的语法、强大的功能，就好比给前端程序员插上了一对自由自由翱翔翅膀，极大的增强了开发效率，代码可读性等。虽然好，但这些新特性并不能在浏览器上正常解析，这样 babel 就显得至关重要。他能帮助我们把这些新特性转换成浏览器识别的代码。下面我们来一起学习，该如何做才能让我们能插上这对自由自由翱翔翅膀 。

一、安装所需要的依赖模块

// 准备
npm install -g gulp // 全局安装 gulp

mkdir gulp-demo // 新建一个项目目录
cd gulp-demo // 进入目录
npm init -y // 初始化项目

进入正题（注意：下面我们用的是新版的 babel）

npm install --save-dev gulp gulp-babel @babel/core @babel/preset-env

二、配置 gulp 任务

根目录新建 gulpfile.js

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

gulp.task('default', () => {
  return gulp.src('src/main.js')
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(gulp.dest('dist'))
})

根目录新建 src/main.js

const add = (x, y) => {
  return x + y
}

console.log(add(1, 2));

执行 gulp 命令 dist 目录下就会有转换好的代码

"use strict";
var add = function add(x, y) {
  return x + y;
};

console.log(add(1, 2));

到这里一个基本转换 es6 语法的工程都搭建完了，是不很简单？是的，就是这么简单。下面我们来试试 export、import、class 等这些语法是否也已经支持了？我们一起来修改一下 main.js 代码

// main.js
import { add } from './math';
import Calculate from './calculate';

console.log(add(1, 2));
const obj = new Calculate(2, 3)
console.log(obj.add());


// calculate.js
class Calculate {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  add() {
    return this.x + this.y
  }
}

export default Calculate;


// math.js
export const add = (x , y) => {
  return x + y;
}

执行 gulp 命令 dist 目录下就会有转换好的代码

"use strict";

var _math = require("./math");

var _calculate = _interopRequireDefault(require("./calculate"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

console.log((0, _math.add)(1, 2));
var obj = new _calculate["default"](2, 3);
console.log(obj.add());

上面代码很明显是不被浏览器给支持的，那该怎么办了？其实这 gulp 自身就做不到了，必须借助一些其它模块来完成这项工作。比如： webpack 、browserify，下面我们来看看 webpack 怎么帮我们做到转换 模块化及class语法：

npm i --save-dev webpack-stream

gulpfile.js

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

gulp.task('default', () => {
  return gulp.src('src/main.js')
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(webpack({
      output: {
        filename: 'main.js'
      }
    }))
    .pipe(gulp.dest('dist'))
})

这样我们来执行一下 gulp ，会给我们怎样的惊喜。

!function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s=0)}([function(e,t,r){"use strict";r.r(t);var n=class{constructor(e,t){this.x=e,this.y=t}add(){return this.x+this.y}};console.log(1+2);const o=new n(2,3);console.log(o.add())}]);

代码经常 js 混淆，可能不太意看懂，能不能在浏览器上执行，同学们可以放到浏览器上试试就知道了。