gulp @babel/preset-env作用及配置使用

一、作用

@babel/preset-env 是 Babel 的一个预设（preset），用于根据目标环境自动确定需要转换的 JavaScript 语法和功能特性。它能够根据你指定的目标环境或浏览器版本，自动选择并应用必要的转换插件。

@babel/preset-env 可以帮助你将较新版本的 JavaScript 代码转换为向后兼容的 ES5 代码，以确保在旧版浏览器或其他环境中正常运行。它会检查你的代码中使用的特性，然后根据目标环境的支持情况，自动添加所需的转换插件。

一些常见的功能包括箭头函数、模板字符串、解构赋值、展开操作符等。通过使用 @babel/preset-env，你可以编写使用最新 JavaScript 语法和功能的代码，并在转换后在更广泛的浏览器和环境中运行。

在 Gulp 中，你可以配置 @babel/preset-env 作为转换器，以便在构建过程中将源代码转换为目标环境所需的兼容代码。通过指定目标环境选项，Babel 将根据目标环境的支持情况进行自动转换，使你能够编写更具表达力和易读性的 JavaScript 代码，而无需过多考虑兼容性问题。

二、使用

要在Gulp中使用Babel和 @babel/preset-env，你需要遵循以下步骤：

1、安装必要的包：首先，在项目的根目录下安装所需的npm包。运行以下命令：

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('babel', function() {
  return gulp.src('src/**/*.js') // 设置源文件路径
    .pipe(babel({ // // 不传递参数，默认使用默认的Babel配置（将转换所有的ECMAScript 2015+（ES6+）语法为ES5兼容的代码）
      presets: ['@babel/preset-env']
    })) // 使用@babel/preset-env进行转换
    .pipe(gulp.dest('dist')); // 设置转换后的输出路径
});

gulp.task('default', gulp.series('babel')); // 默认任务为babel任务

创建 .babelrc 文件：在项目根目录下创建一个名为 .babelrc 的文件，并添加以下配置：

{
  "presets": ["@babel/preset-env"]
}

这将确保在使用 gulp-babel 插件时，默认使用 @babel/preset-env 进行转换。

在终端中运行以下命令来执行Gulp任务：

gulp

这将会启动默认任务，即将 src 目录下的所有JavaScript文件转换为ES5语法并输出到 dist 目录下。