在前端开发中，babel 将 ES6+ 的代码转换为向下兼容的 JavaScript 语法，让新特性可以在旧版浏览器上运行。@autoguru/babel-preset 是一个用于 babel 转译 ES6+ 代码的预设，它具有自动处理一些繁琐的配置信息的能力，让前端工程师可以快速开发高效的代码。
本文将介绍如何在项目中使用该 npm 包。
安装
首先，你需要安装 @autoguru/babel-preset：
--- - -- ----------------------
注意：该 npm 包可以在 babel v7.0.0 及以上版本使用，因此需要确保你的 babel 版本符合要求。
配置
在配置 babel 的 .babelrc 文件中，你需要将该预设添加到 presets 列表中。可以将其添加为默认预设，也可以为每个项目分别指定。
添加为默认预设
如果你要在多个项目中使用该预设，可以将其添加为全局默认预设，这样不需要在每个项目中重新配置。
找到你的家目录下的 .babelrc 文件，如果该文件不存在则创建一个。然后在文件中添加以下内容：
- ---------- -------------------------- -
这样在你的每个项目中，无需额外配置即可使用该预设。
单独项目中使用
如果你要在某个项目中使用该预设，需要创建一个新的 .babelrc 文件并在其中添加以下内容：
- ---------- ------------- -
这个例子只启用了 @autoguru/babel-preset，但是如果你想使用该预设的扩展功能 (比如 @autoguru/babel-preset/react)，你可以简单地在"presets"数组中添加更多的子属性：
-
---------- -
-------------------------
------------------------------
-
-示例
以下示例用于说明 @autoguru/babel-preset 的使用方式，并将 ES6+ 代码转换为向下兼容的 JavaScript 语法。
我们的示例文件 app.js 代码如下：
----- ----- - --------- -------- ----- ----- ------ - -------------- -- -------------------- --------------------
在 Babel 7 中有两种配置方式，分别是 .babelrc 和 package.json，此处 以 .babelrc 为例。在项目的根目录下找到(或新建)一个.babelrc 文件，并添加如下配置：
- ---------- -------------- ---------- -- -
在终端输入 babel app.js -o dist.js 命令即可将 apps.js 文件转换为向下兼容的 JavaScript 语法。
转换后的文件 dist.js 代码如下：
---- -------- --- ----- - --------- -------- ----- --- ------ - ------------------ ------ - ------ ------------------- --- --------------------
结论
@autoguru/babel-preset 很容易使用并且能帮助大家快速开发高效的代码。它内置了大部分开发者所需要的配置，提供了自动更新和支持最新的 ECMAScript 功能的能力，更好地支持所有现代浏览器。
希望这篇介绍已经解决了你在 Babel 配置上的问题。现在你可以留下你的评论，分享你使用这个 npm 包的经验或者提出问题，我们将竭诚为您解答。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/105936