3

I'm new to babel, and just trying to play around with the simple browser-based babel.js standalone, but I'm running into some problems even with a very simple "hello world" type example. Here's some code that works fine in Chrome 70, but fails with "undefined is not a function" in Chrome 40:

<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.js"></script>
<script type="text/babel">
async function test() {}  
console.log("done");
</script>

Here's the stack trace, screenshotted from the browserling page:

enter image description here

And here's the offending bit of code:

enter image description here

This seems to be related to this question, but I'd have thought that the standalone would "stand alone" and not require any extra stuff to polyfill it. At a file size of 5.7mb, shouldn't Object.assign be polyfilled? Maybe I'm missing something here?

  • 3
    Polyfill's and Babel are really too separate things, if your want to target version 40 of chrome then your going to need to load a polyfill. There are lots of ways to implement polyfill's, manually of course. But there is also this site you could use -> https://polyfill.io/v2/docs/ – Keith Jan 06 '19 at 22:42
  • Ahhh, thank you! I just assumed that 5.7mb meant that all the polyfills were included, but I guess that would have made the file even larger still. Thanks! –  Jan 06 '19 at 23:41

1 Answers1

3

Thanks to @Keith's comment for letting me know that I need to include polyfills separately. Here's a working "hello world" with babel.js:

<script src="https://polyfill.io/v2/polyfill.js?features=default,es5,es6&flags=gated,always"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.js"></script>

<script type="text/babel" data-presets="es2015,es2016,es2017,stage-3">
async function test() { return 10; }  
console.log("done");
</script>

Edit: When testing it with my real code I was getting "runtimeGenerator not defined" messages, so this isn't a complete solution. I tried including it straight from the source, and it seemed to work, but then I was getting "undefined is not a function" again, and so to save my what is left of my hair and sanity I stepped away from the computer.

Edit 2: Here's what I ended up needing:

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/facebook/regenerator/packages/regenerator-runtime/runtime.js"></script>
<script src="https://polyfill.io/v2/polyfill.js?features=default,es5,es6,Array.prototype.@@iterator,Array.prototype.entries,Array.prototype.find,Array.prototype.findIndex,Array.prototype.copyWithin,Array.prototype.findIndex,Array.prototype.includes,Array.prototype.keys,Array.prototype.values,DOMTokenList.prototype.@@iterator,DocumentFragment,Element.prototype.dataset,EventSource,Function.name,HTMLCanvasElement.prototype.toBlob,HTMLDocument,MutationObserver,NodeList.prototype.@@iterator,IntersectionObserver,IntersectionObserverEntry,NodeList.prototype.@@iterator,Object.entries,Object.values,Promise.prototype.finally,RegExp.prototype.flags,String.fromCodePoint,String.prototype.codePointAt,String.prototype.padEnd,String.prototype.padStart,String.prototype.repeat,Symbol.hasInstance,Symbol.isConcatSpreadable,Symbol.match,Symbol.replace,Symbol.search,Symbol.species,Symbol.split,Symbol.toPrimitive,Symbol.toStringTag,console.exception,fetch,screen.orientation,setImmediate&flags=gated,always"></script>
<script src="https://unpkg.com/@babel/standalone@7.2.5/babel.js"></script>
<script>
  var beforeCode = "YOUR ES6+ CODE";
  var afterCode = Babel.transform(beforeCode, {
    presets: ['es2015','es2016','es2017','stage-3'],
    plugins: ['transform-async-to-generator','transform-regenerator'],
  }).code;
  var script = document.createElement("script");
  script.innerHTML = afterCode;
  document.head.appendChild(script);
</script>

I also needed to add a NodeList.forEach polyfill which polyfill.io doesn't support.