npm 包 @autoguru/babel-preset 使用教程

在前端开发中，babel 将 ES6+ 的代码转换为向下兼容的 JavaScript 语法，让新特性可以在旧版浏览器上运行。@autoguru/babel-preset 是一个用于 babel 转译 ES6+ 代码的预设，它具有自动处理一些繁琐的配置信息的能力，让前端工程师可以快速开发高效的代码。

本文将介绍如何在项目中使用该 npm 包。

安装

首先，你需要安装 @autoguru/babel-preset：

npm i -D @autoguru/babel-preset

注意：该 npm 包可以在 babel v7.0.0 及以上版本使用，因此需要确保你的 babel 版本符合要求。

配置

在配置 babel 的 .babelrc 文件中，你需要将该预设添加到 presets 列表中。可以将其添加为默认预设，也可以为每个项目分别指定。

添加为默认预设

如果你要在多个项目中使用该预设，可以将其添加为全局默认预设，这样不需要在每个项目中重新配置。

找到你的家目录下的 .babelrc 文件，如果该文件不存在则创建一个。然后在文件中添加以下内容：

{
  "presets": ["@autoguru/babel-preset"]
}

这样在你的每个项目中，无需额外配置即可使用该预设。

单独项目中使用

如果你要在某个项目中使用该预设，需要创建一个新的 .babelrc 文件并在其中添加以下内容：

{
  "presets": ["@autoguru"]
}

这个例子只启用了 @autoguru/babel-preset，但是如果你想使用该预设的扩展功能 (比如 @autoguru/babel-preset/react)，你可以简单地在"presets"数组中添加更多的子属性：

{
  "presets": [
    "@autoguru/babel-preset",
    "@autoguru/babel-preset/react"
  ]
}

示例

以下示例用于说明 @autoguru/babel-preset 的使用方式，并将 ES6+ 代码转换为向下兼容的 JavaScript 语法。

我们的示例文件 app.js 代码如下：

const words = ['hello', 'world', '!'];
const result = words.map(word => word.toUpperCase());
console.log(result);

在 Babel 7 中有两种配置方式，分别是 .babelrc 和 package.json，此处 以 .babelrc 为例。在项目的根目录下找到(或新建)一个.babelrc 文件，并添加如下配置：

{
  "presets": ["@autoguru"],
  "plugins": []
}

在终端输入 babel app.js -o dist.js 命令即可将 apps.js 文件转换为向下兼容的 JavaScript 语法。

转换后的文件 dist.js 代码如下：

"use strict";

var words = ["hello", "world", "!"];
var result = words.map(function (word) {
  return word.toUpperCase();
});
console.log(result);

结论

@autoguru/babel-preset 很容易使用并且能帮助大家快速开发高效的代码。它内置了大部分开发者所需要的配置，提供了自动更新和支持最新的 ECMAScript 功能的能力，更好地支持所有现代浏览器。

希望这篇介绍已经解决了你在 Babel 配置上的问题。现在你可以留下你的评论，分享你使用这个 npm 包的经验或者提出问题，我们将竭诚为您解答。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/105936