在前端开发中，Babel 是一个十分常用的工具，它可以将 ECMAScript 6+（ES6+）的代码转换为向后兼容的 JavaScript 代码，从而可以在不同环境下运行。
为了方便地使用 Babel，我们可以使用 preset。preset 是一组 Babel 插件的集合，用于根据特定的需求进行转换。在这里，我们介绍一个 npm 包：@adeira/babel-preset-adeira。
安装
我们可以通过 npm 安装 @adeira/babel-preset-adeira：
--- ------- ---------- ---------------------------
使用
@adeira/babel-preset-adeira 的使用十分简单，只需要在项目的 .babelrc 文件中引入即可：
- ---------- ------------------------------- -
配置项
@adeira/babel-preset-adeira 默认包含了一些插件和配置项。它支持以下的特性：
- 支持 React 和 JSX。
- 支持 TypeScript。
- 支持 object-rest-spread 语法。
- 支持 class-properties 语法。
- 支持动态导入。
如果我们需要针对特定的需求进行配置，可以通过自定义一个 preset 或直接修改 .babelrc 文件来实现。下面是一些常用的配置项：
useBuiltIns
useBuiltIns 是 @babel/preset-env 中的一个配置项，它可以根据浏览器或者运行环境动态地加载 polyfills。默认情况下，useBuiltIns 设置为 false。
-
---------- -
-
------------------------------
-
-------------- --------
--------- -
-
-
-
-在上面的示例中，我们开启了 useBuiltIns 选项，并设置为 usage。这表示 Babel 会根据代码中使用的特性，自动加载相应的 polyfills，从而减小最终代码的体积。我们还指定了 core-js 版本为 3.x。
targets
targets 是 @babel/preset-env 中的另一个配置项，它可以设置需要转换的目标浏览器或运行环境，从而只生成必要的 polyfills。默认情况下，targets 设置为 {}，表示转换所有的 JavaScript 语法。
-
---------- -
-
------------------------------
-
---------- -
----------- -
-- ------
----- - ----------
---- ------
---- -- - ---
---- ------- ----
-
-
-
-
-
-在上面的示例中，我们设置了 targets.browsers，表示支持全球占有率大于 0.5% 的浏览器、最近的三个版本以及停止维护的浏览器（如 IE）以及 Opera Mini。
transformRuntime
transformRuntime 是 @babel/plugin-transform-runtime 中的一个配置项，它可以仅仅引入需要的 polyfills，从而避免生成全局的 polyfills。
-
---------- -
-
------------------------------
-
------------------- -
--------- --
---------- ---------
--------------- -----
------------------ ------
---------- ----
-
-
-
-
-在上面的示例中，我们开启了 transformRuntime 选项，并指定 core-js 的版本为 3.x。
示例
下面是一个示例，它使用了 @adeira/babel-preset-adeira 和 @babel/plugin-transform-runtime：
-
---------- -
-
------------------------------
-
-------------- --------
--------- --
---------- -
----------- -
-- ------
----- - ----------
---- ------
---- -- - ---
---- ------- ----
-
--
------------------- -
--------- --
---------- ---------
--------------- -----
------------------ ------
---------- ----
-
-
-
--
---------- -----------------------------------
-总结
@adeira/babel-preset-adeira 提供了一组常用的 Babel 插件，可以方便地进行配置和使用。在项目中使用该 preset 可以提高开发效率、减小代码体积，有助于提升应用的性能。希望本篇文章对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/121004