本文主要是介绍gulp 如何运用 babel 来打包项目中 es6 的新特性,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
什么是 babel ? 在前端项目中他能做什么了?
Babel 是一个工具链,主要用于在当前和旧的浏览器或环境中,将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。以下是 Babel 可以做的主要事情:
- 转换语法
- 源代码转换(codemods)
简而言之,在前端开发过程中,大家会用很多 es6 的新特性,比如箭头函数、class、解构、Promise、async / await等。这些新的特性,简洁的语法、强大的功能,就好比给前端程序员插上了一对自由自由翱翔翅膀,极大的增强了开发效率,代码可读性等。虽然好,但这些新特性并不能在浏览器上正常解析,这样 babel 就显得至关重要。他能帮助我们把这些新特性转换成浏览器识别的代码。下面我们来一起学习,该如何做才能让我们能插上这对自由自由翱翔翅膀 。
一、安装所需要的依赖模块
// 准备
npm install -g gulp // 全局安装 gulpmkdir 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 混淆,可能不太意看懂,能不能在浏览器上执行,同学们可以放到浏览器上试试就知道了。
源码下载请移步
这篇关于gulp 如何运用 babel 来打包项目中 es6 的新特性的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!