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

What is @babel/plugin-syntax-top-level-await?

The @babel/plugin-syntax-top-level-await package allows Babel to parse top-level await expressions. This is particularly useful for enabling asynchronous module loading directly at the top level of your modules, without needing to wrap them in async functions. It's a syntax-only plugin, meaning it allows Babel to understand this syntax but does not transform it. This is useful for environments that support top-level await natively.

What are @babel/plugin-syntax-top-level-await's main functionalities?

Parsing top-level await expressions

Enables Babel to parse top-level await expressions, allowing for direct, asynchronous operations at the module level without wrapping in an async function.

await fetch('https://example.com/data');

Other packages similar to @babel/plugin-syntax-top-level-await

@babel/preset-env

While not exclusively focused on top-level await, @babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage syntax transformations and the browser polyfills necessary for your target environment. It includes transformations for async/await but does not specifically target top-level await syntax.

typescript

TypeScript, a superset of JavaScript, supports async/await and has been updated to support top-level await in modules for environments that support it. While TypeScript is much broader in scope, offering type checking and other features, it provides similar functionality in terms of understanding and utilizing top-level await.

README

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

Allow parsing of top-level await in modules

See our website @babel/plugin-syntax-top-level-await for more information.

Install

Using npm:

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

or using yarn:

yarn add @babel/plugin-syntax-top-level-await --dev