npm 包 @babel/plugin-syntax-top-level-await 使用教程

在前端开发中，随着 JavaScript 语法的不断升级，一些新特性也逐渐被引入，例如顶层 await，它允许在顶层作用域中使用 await 关键字。然而，由于这个特性并不是所有的 JavaScript 运行环境都支持，所以需要使用 Babel 进行语法转换，以便在更广泛的运行环境中使用。

在本文中，我们就来介绍一个常用的 npm 包：@babel/plugin-syntax-top-level-await，它可以帮助我们在 Babel 中使用顶层 await 关键字。

环境准备

首先，我们需要在本地安装 Babel，可以使用 npm 来进行安装：

npm install --save-dev @babel/core @babel/cli

安装 @babel/plugin-syntax-top-level-await

接下来，让我们来安装 @babel/plugin-syntax-top-level-await，同样使用 npm 进行安装：

npm install --save-dev @babel/plugin-syntax-top-level-await

安装完成后，我们可以在项目的 package.json 文件中找到相应的依赖：

"devDependencies": {
  "@babel/cli": "^7.14.5",
  "@babel/core": "^7.14.6",
  "@babel/plugin-syntax-top-level-await": "^7.14.5"
}

配置 Babel

接下来，我们需要在项目中配置 Babel，可以在根目录下创建一个 .babelrc 或 .babelrc.js 文件，内容如下：

{
  "plugins": ["@babel/plugin-syntax-top-level-await"]
}

这样配置之后，Babel 就会自动加载并使用 @babel/plugin-syntax-top-level-await。

使用顶层 await

接下来，我们就可以在代码中使用顶层 await 了，例如：

const response = await fetch('https://api.github.com/users/octocat');
const json = await response.json();
console.log(json);

示例代码

为了更加直观地说明使用 @babel/plugin-syntax-top-level-await 的方法，我们来看看下面的示例代码。在这个示例代码中，我们使用 Babel 将 TypeScript 转换成 JavaScript，并使用 @babel/plugin-syntax-top-level-await 支持顶层 await。

// src/index.ts
async function fetchData() {
  const response = await fetch('https://api.github.com/users/octocat'); // 使用 fetch 获取远程数据
  const json = await response.json(); // 将返回结果转成 JSON 格式
  console.log(json); // 输出 JSON 数据
}

fetchData();

上面的代码中，我们定义了一个名为 fetchData 的函数，里面使用了顶层 await 关键字。这样就可以在代码的顶层作用域中使用 await。

接下来，我们使用 TSC 将 TypeScript 文件转换为 JavaScript 文件，并使用 Babel 进行语法转换：

tsc src/index.ts --outDir dist
babel dist --out-dir dist

这样就可以在 dist 目录下生成支持顶层 await 的 JavaScript 文件了：

// dist/index.js
async function fetchData() {
  const response = await fetch('https://api.github.com/users/octocat');
  const json = await response.json();
  console.log(json);
}

fetchData();

总结

本文介绍了如何使用 npm 包 @babel/plugin-syntax-top-level-await，来支持顶层 await 关键字的语法转换。通过本文的学习，你可以更加熟练地掌握 Babel 的使用方法，并解决一些新特性在不同 JavaScript 运行环境中的兼容问题。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/babel-plugin-syntax-top-level-await