欢迎使用 @doctrine/babel-preset-shared，这是一个用于 Babel 转换的 npm 包。本文章将会介绍如何使用这个包以及它的深度和指导意义。
安装
通过 npm 进行安装：
npm install @doctrine/babel-preset-shared
用法
该 preset 可以设置在 .babelrc 中，例如：
{
"presets": ["@doctrine/babel-preset-shared"]
}这个 preset 包括以下插件和设置：
@babel/preset-env用于将 ES6+ 代码转换为兼容的版本。@babel/plugin-transform-runtime用于减少代码冗余以及 ES6+ 代码运行时的支持。
你可以使用不同的选项自定义 preset 中的插件和设置：
{
"presets": [
["@doctrine/babel-preset-shared", {
"corejs": 3,
"useBuiltIns": "usage"
}]
]
}上述示例使用了 @babel/preset-env 的选项 useBuiltIns: "usage" 和 corejs: 3，以启用按需加载 polyfills。
深度和学习
对于新手来说，学习如何将 ES6+ 代码转换为兼容的版本是很重要的。使用 Babel 以及该 preset，可以简化这个过程。
@babel/preset-env 提供了一个非常方便的方法，可以根据需要将 ECMAScript 规范版本的 JavaScript 转换为较旧的浏览器能够理解和执行的 JavaScript。同时，@babel/plugin-transform-runtime 可以有效地减少代码冗余和提供运行时支持。
因此，@doctrine/babel-preset-shared 可以有效地在前端类项目中使用，并且对于想要了解如何在项目中使用转换工具的新手来说，是很有价值的。
示例代码
这里是一个有关如何使用该 preset 的示例代码：
-- -------------------- ---- ------- -- -------- ----- ------- - ------- -------- ----- --- - --- -- -- - - -- ----- --- - ------ --- -------------------- -----
在没有转换的情况下，代码无法在较旧的浏览器中运行。使用 @doctrine/babel-preset-shared，可以将代码转换为兼容版本：
-- -------------------- ---- ------- -- -------- ---- -------- --- ---------------------- - -------------------------------------------------------- --- ---- - ----------------------------------------- --- ------- - ------- -------- --- --- - -------- ------ -- - ------ - - -- -- --- --- - ------ --- -------------------- -----
使用 Babel 进行转换后，@babel/preset-env 将代码转换为 ES5 兼容版本，而 @babel/plugin-transform-runtime 则添加了 helpers 和 regenerator runtime，并通过引入 _sum 取代了 add(2, 3)。
希望这篇介绍能够帮助您使用 @doctrine/babel-preset-shared，以实现将现代 JavaScript 转换为兼容版本的浏览器代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/106011