在前端开发中，我们常常需要使用 Babel 来进行 JavaScript 代码的转换，这样我们就能使用最新的 JavaScript 语法特性而不用担心浏览器的兼容性问题。而 @launchbadge/babel-preset 则是 Babel 的一个预设，其中包含了常用的一些 Babel 插件，从而方便我们快速地进行基本的代码转换。
安装
首先，我们需要在项目中安装 @launchbadge/babel-preset。可以通过以下命令进行安装：
npm install --save-dev @launchbadge/babel-preset
配置
接下来，我们需要在项目的 .babelrc 配置文件中添加 @launchbadge/babel-preset。可以参考下面的示例配置：
{
"presets": ["@launchbadge/babel-preset"]
}在这个示例配置中，我们只添加了一个 preset，即 @launchbadge/babel-preset。如果你需要使用多个 preset，可以将它们添加到 presets 数组中即可。
示例
假设我们有一个 ES6 的类定义：
-- -------------------- ---- -------
----- ------ -
----------------- -
--------- - -----
-
------- -
---------------- -- ---- -- ----------------
-
-我们需要将它转换成 ES5 的代码，可以使用 @babel/preset-env。但是，如果我们使用了 @launchbadge/babel-preset，就无需手动添加这个 preset 了。可以直接运行 Babel，将代码转换成我们需要的样子：
npx babel ./src/index.js -o ./dist/index.js
转换后的代码如下：
-- -------------------- ---- -------
---- --------
----- ------ -
----------------- -
--------- - -----
-
------- -
---------------- -- ---- -- ----------------
-
-总结
@launchbadge/babel-preset 是一个方便我们快速进行 Babel 转换的预设，它包含了常用的一些 Babel 插件。在项目中使用 @launchbadge/babel-preset 时，只需要在 Babel 的配置文件中添加该预设即可。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005606781e8991b448de89f