7

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
TylerH
  • 20,799
  • 66
  • 75
  • 101
Matthew Goulart
  • 2,873
  • 4
  • 28
  • 63
  • Yeah, usually you don't want to use babel to transpile your library code. You'll possibly want polyfills, but you don't want to rely on transpilation in a library. – gabriel.hayes Nov 08 '19 at 20:12
  • For your `@babel/preset-env` what is your `useBuiltIns` set it? Try setting it to `entry` and see if that helps. – dotconnor Nov 08 '19 at 20:12
  • @user1538301 not sure what you mean. How would I get async await working with a polyfill? – Matthew Goulart Nov 08 '19 at 20:36
  • @MatthewGoulart You wouldn't, you just wouldn't use it. You can get `Promises` with a polyfill, which IMO I prefer to `async/await` (I don't like how `async/await` changes return types.. I like to know exactly what I'm looking at) – gabriel.hayes Nov 08 '19 at 20:37
  • @user1538301Interesting... Can you elaborate a bit as to why you wouldn't? What are the disadvantages to using babel? In what circumstances *would* one use babel? – Matthew Goulart Nov 08 '19 at 21:25
  • @user1538301 Also, i'm not sure what you mean by "changes the return type". An async function returns a `Promise` and you can either `await` that promise or, well, do whatever you want with it... – Matthew Goulart Nov 08 '19 at 21:32
  • @MatthewGoulart that's exactly what I mean haha, though that's purely a matter of opinion. In practice it is exactly the same as working with `Promise`s just more concise – gabriel.hayes Nov 08 '19 at 21:33
  • @user1538301Haha I get it. I am a C# programmer by trade so async/await tickles my fancy. Any thoughts on the comment right before my last one? You've scared me into thinking I made a mistake by using babel... – Matthew Goulart Nov 08 '19 at 21:39

1 Answers1

6

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

Community
  • 1
  • 1
Yu Zhou
  • 11,532
  • 1
  • 8
  • 22
  • Good compromise between size added to bundle and use of new features. Especially considering the pure joy of async/await. Thanks! – Matthew Goulart Nov 11 '19 at 21:22
  • Just a quick question regarding the steps. I've installed regenerator but what does add node_modules/regenerator... into your bundle. Mean? – user3717206 Mar 10 '20 at 22:12
  • how do you add node_modules/regenerator-runtime/runtime.js (10.7kb minified) into your bundle? I'm confused what it means to add something to my bundle – user3717206 Mar 18 '20 at 08:59
  • @user3717206 I think that's mean you just need to add `node_modules/regenerator-runtime/runtime.js` this file into the project you need. – Yu Zhou Mar 18 '20 at 09:48
  • That webpack thing didn't work for me, but this article did it https://dev.to/btandayamo/a-guide-to-through-async-await-with-babel-and-webpack-mh5 – pedromss Aug 19 '21 at 10:54