Menu
I am hoping to use async/await in my source code and have it transpiled by babel to something useable by >0.25% not dead.
My head is spinning with the plethora of ways to attack this. Some are deprecated, some flat out don't work, and the one that I have gotten to work more than doubles the size of my library.
I've tried using @babel/polyfill with @babel/plugin-transform-async-to-generator and it works well, but the library goes from ~500kB to ~1.1MB.
I also tried leaving it to @babel/preset-env by giving it >0.25% not dead, but that hasn't made a difference. I get:
regeneratorRuntime is undefined
I'm hoping there is a better way to do this than including all this regeneratorRuntime stuff...
I'd rather go back to the callback pyramid of doom than ship a library over 1mb...
I am using:
990
Babel needs a little extra love if you want to transpile Async/Await or Generator Functions (link to docs). Now you can Async, Await, and Generate to your hearts' content.
Internet Explorer IE browser version 6 to 11 doesn't supports JAVASCRIPT Async functions.
When you want to know if a JavaScript feature is supported by a browser, use http://caniuse.com. As you can see, the async and await keywords are supported by a majority of up-to-date browsers. But of course, Internet Explorer does not support them.
Because async functions are still a proposal for the language, Babel does not compile it by default, hence the babel-preset-stage-3 package. Now in the .babelrc file, we have to configure Babel to enable stage-3 features.
So beside annoying code regenerator which is required for async await to work, we also need promise and fetch polyfill. Sign up for free to join this conversation on GitHub .
First, the await keyword can only be used inside an async function, like in the above example. Second, we can only await for a function that returns a Promise. In the above example, the fetch function returns a Promise (that will be a Response object), and the JSON function also returns a promise that will be a movie object.
First is to use a try/catch: And the second is to use the catch method on the Promise returned by the async function, like so: Async functions are still a proposal for future versions of JavaScript, but it can already be used with the help of a transpiler such as Babel.
If you only need the generator polyfill — which is needed for async/await — then you can just use facebook/regenerator.
You could follow the steps to support async/await in IE 11:
- use babel-preset-env
yarn add regeneratorornpm install regenerator- add
node_modules/regenerator-runtime/runtime.js (10.7kb minified)into your bundle
Reference link: Add ES7 Async/Await Support for your Webapp in 3 Easy Steps
109
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
