How to enable async/await with babel with support for IE11

Question

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:

• webpack 4.41.0
• babel 7.6.2

Solution

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 regenerator or npm 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