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

作者: tww844475003 分类: 前端开发 发布时间: 2021-08-07 00:00

什么是 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 混淆,可能不太意看懂,能不能在浏览器上执行,同学们可以放到浏览器上试试就知道了。

前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

2条评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注