Babel 是一个 JavaScript 编译器，它可以将 ECMAScript 2015+ 的代码转换成向后兼容的 JavaScript 代码，以便在当前和旧版本的浏览器或其他环境中运行。Babel 的配置文件是 .babelrc，其中 presets 字段是最重要的配置项之一。本文将详细介绍 presets 字段的用法和示例代码，并提供学习和指导意义。
presets 字段的作用
presets 字段是 Babel 预设的集合，它包含了一组插件的集合，用于将特定版本的 ECMAScript 转换成向后兼容的 JavaScript 代码。Babel 已经为我们提供了许多预设，如 @babel/preset-env，@babel/preset-react，@babel/preset-typescript 等等。我们可以使用这些预设，也可以自定义自己的预设。
使用预设
我们可以使用以下命令安装预设：
--- ------- ---------- -----------------
然后在 .babelrc 中配置 presets 字段：
- ---------- --------------------- -
这样就可以将 ECMAScript 2015+ 的代码转换成向后兼容的 JavaScript 代码了。如果我们还需要使用 React 或 TypeScript，可以继续添加预设：
- ---------- --------------------- ---------------------- --------------------------- -
自定义预设
如果我们需要自定义预设，可以在项目中创建一个新的 npm 包，并在其中定义我们需要的插件集合。例如，我们可以创建一个名为 @my/preset 的 npm 包，然后在其中定义一个名为 my-preset 的插件集合：
-- -------------------
-------------- - ------------- -------- -
------ -
-------- -
-- ---
-
--
--接下来，我们可以在项目中安装 @my/preset，并在 .babelrc 中使用它：
- ---------- -------------- -
预设的选项
预设可以接受选项，用于自定义转换规则。例如，@babel/preset-env 可以接受 targets 和 useBuiltIns 选项，用于指定需要支持的浏览器和是否需要自动引入 polyfill。示例代码如下：
-
---------- -
-
--------------------
-
---------- -
--------- -----
----- ----
--
-------------- --------
--------- -------
-
-
-
-这样配置之后，Babel 将会自动将代码转换成向后兼容的 JavaScript 代码，并根据需要自动引入 polyfill。
总结
presets 字段是 Babel 预设的集合，用于将特定版本的 ECMAScript 转换成向后兼容的 JavaScript 代码。我们可以使用 Babel 提供的预设，也可以自定义自己的预设。预设可以接受选项，用于自定义转换规则。通过学习 presets 字段的使用，我们可以更好地理解 Babel 的工作原理，并在项目中更加灵活地使用 Babel。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65814b39d2f5e1655dc7d059