随着前端技术的快速发展，越来越多的开发者开始使用 ES6 以及更新的 JavaScript 语言特性。然而，不是所有浏览器都支持这些新特性，因此需要使用工具将其转换为旧版 JavaScript。Babel 就是这样一种工具，它可以将 ES6 等较新的 JavaScript 代码转换为可以在大多数浏览器中运行的 JavaScript 代码。
在本文中，我们将探讨如何在 Gulp 任务中使用 Babel 7。
安装
首先，我们需要安装 gulp 和 gulp-babel：
npm install gulp gulp-babel @babel/core @babel/preset-env --save-dev
此外，我们需要安装 Babel 的 preset-env，它将根据你正在使用的 ECMAScript 版本自动确定插件集。这样，我们就可以编写最新版本的代码，而不必担心会在旧的 JavaScript 引擎上出现错误。
配置
在这一步中，我们需要配置 Babel。我们将创建一个 .babelrc 文件来定义 Babel 需要的预设（也称为插件集）。
-- -------------------- ---- -------
-
---------- -
-
--------------------
-
---------- -
----------- -
----- - ----------
---- -- -- ----
---- ------- -- ----
-
-
-
-
-
-上面的配置告诉 Babel 告诉它在编译时使用最新的 ECMAScript 特性，并编译所有目标浏览器中支持的“默认”特性。
接下来，我们需要在 Gulp 任务中引用它。创建一个名为 gulpfile.js 的文件，并添加以下代码：
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('babel', () =>
gulp.src('src/**/*.js')
.pipe(babel())
.pipe(gulp.dest('dist'))
);这个任务将读取项目中 src 目录下的所有 JavaScript 文件，并将其编译为目标浏览器可以支持的 JavaScript 版本，最终输出到 dist 目录中。
示例
为了演示如何使用 Gulp 和 Babel 7，我们将创建一个名为 index.js 的文件，并将以下内容添加到其中：
const square = x => x * x; console.log(square(5));
这个文件通过箭头函数定义并打印出给定数字的平方。
接下来，我们将在 gulpfile.js 文件中定义一个名为 babel 的 Gulp 任务。该任务将使用 Gulp 和 Babel 7 来将 index.js 转换为 ES5 版本。
const gulp = require('gulp');
const babel = require('gulp-babel');
gulp.task('babel', () =>
gulp.src('index.js')
.pipe(babel())
.pipe(gulp.dest('dist'))
);接下来，我们需要将 package.json 文件的 scripts 属性中的 build 项更新为：
"scripts": {
"build": "gulp babel"
}现在，我们可以运行以下命令：
npm run build
Babel 将把 index.js 转换为 ES5 代码，并将其输出到 dist 目录中。现在我们可以在浏览器上运行转换后的代码，无需担心浏览器不支持新的 JavaScript 特性。
结论
在本文中，我们介绍了如何在 Gulp 任务中使用 Babel 7 来编译最新的 JavaScript 代码，使其可以在旧版浏览器上运行。通过使用 Gulp 和 Babel 7，我们可以轻松地编写和管理 JavaScript 代码，并确保它们在目标浏览器上得到良好的支持。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67340a870bc820c582460bf0