在前端开发中，我们经常需要使用 ES6 或者更高版本的 JavaScript 语法来编写代码，这些语法在一些旧版浏览器上并不被支持。为了兼容这些浏览器，我们需要将 ES6 代码编译成 ES5 代码。而 babel 就是一个非常流行的 JavaScript 编译器，它可以将 ES6 代码转换成 ES5 代码。在本文中，我们将介绍如何使用 gulp 来配置 babel 编译器。
安装 gulp 和 babel
在开始之前，我们需要先安装 gulp 和 babel。可以使用以下命令来安装：
npm install gulp babel-core babel-preset-env gulp-babel --save-dev
配置 gulpfile.js
在项目根目录下创建一个名为 gulpfile.js 的文件，并在其中添加以下代码：
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('default', () =>
gulp.src('src/**/*.js') // 编译 src 目录下所有 js 文件
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(gulp.dest('dist')) // 将编译后的文件存放到 dist 目录下
);在这段代码中，我们定义了一个名为 default 的 gulp 任务，该任务会编译 src 目录下所有的 js 文件，并将编译后的文件存放到 dist 目录下。在编译时，我们使用了 @babel/env 预设，这个预设可以根据目标浏览器的版本自动选择需要的 babel 插件，从而将代码转换成浏览器能够理解的语法。
配置 .babelrc
除了在 gulpfile.js 中配置 babel，我们还可以使用 .babelrc 文件来配置 babel。在项目根目录下创建一个名为 .babelrc 的文件，并在其中添加以下代码：
{
"presets": ["@babel/env"]
}这段代码与上面的 gulpfile.js 中的代码类似，都是使用了 @babel/env 预设来编译代码。
示例代码
假设我们要编译以下 ES6 代码：
const sum = (a, b) => a + b; console.log(sum(1, 2));
使用 gulp 和 babel 编译后的代码为：
'use strict';
var sum = function sum(a, b) {
return a + b;
};
console.log(sum(1, 2));总结
在本文中，我们介绍了如何使用 gulp 和 babel 来编译 ES6 代码。在配置时，我们可以使用 gulpfile.js 或者 .babelrc 文件来配置 babel。使用 gulp 和 babel 来编译代码可以让我们更方便地使用 ES6 语法，同时也可以兼容旧版浏览器。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65bde7faadd4f0e0ff78434e