0

I need to load babel-polyfill only for IE. Also it's required to make IE wait and do not perform the console.log('Checkpoint 2'); and code below it (including IeOnlyPolyfillTest.js) until babel-polyfill will be fully loaded from the external resource. 

 <body>
  <script type="text/javascript">

    var userAgent = window.navigator.userAgent;
    var isInternetExplorer = userAgent.indexOf('Trident/') > 0 || userAgent.indexOf('MSIE ') > 0;

    if (isInternetExplorer) {
      var htmlDocumentHead = document.getElementsByTagName('head')[0];
      var babelPolyfillScript = document.createElement('script');
      babelPolyfillScript.type = 'text/javascript';
      babelPolyfillScript.src = 'https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.0.0-rc.1/polyfill.min.js';
      console.log('Checkpoint 1');
      htmlDocumentHead.appendChild(babelPolyfillScript);
      console.log('Checkpoint 2');
    }

  </script>
  <script type="text/javascript" src="scripts/IeOnlyPolyfillTest.js"></script>
</body>

And IeOnlyPolyfillTest.js part:

(function launchApplication() {
  console.log('Checkpoint 3');
  testSymbolFeature();
})();

function testSymbolFeature() {
  let symbolTest = Symbol('foo');
  console.log(`Symbol feature is working! ${symbolTest.toString()}`);
}

First, I cannot add async="false" attribute:

babelPolyfillScript.async = false; // no effect
babelPolyfillScript.async = 'false'; // async="" will be generated

I tried following following solution (original answer):

var script = document.createElement("script");
script.src = "script.js";
console.log("a");
document.body.appendChild(script);
console.log("b");

In my case, logs order is always right too, however if to reload page some times, we randomly get cases with error and cases without error (by other words, error conditions is unclear, and it occurs case by case):

Bad case:

enter image description here

Good case:

enter image description here

So, what we can do to make console.log('Checkpoint 2'); and all scripts below wait until babel-polyfill will be fully loaded?

Takeshi Tokugawa YD
  • 670
  • 5
  • 40
  • 124
  • load the polyfill FIRST – Jaromanda X Aug 19 '18 at 03:56
  • @Jaromanda X, I know I need to do it, but how to do it conditionally for IE only? – Takeshi Tokugawa YD Aug 19 '18 at 03:58
  • 1
    polyfills are usually written in a way that they polyfill only those methods etc that need to be polyfilled – Jaromanda X Aug 19 '18 at 04:00
  • @Jaromanda X, I am sorry, but it is off-top. Let me repeat what we need to do: we need to load babel-polyfill only for Internet Explorer before any other code will be executed. – Takeshi Tokugawa YD Aug 19 '18 at 04:02
  • oh - got ya ... so, a script tag as a `load` event you can use ... so, `babelPolyfillScript.addEventListener('load', e => console.log('Checkpoint 2'))` won't log `checkpoint 2` until the polyfill has loaded – Jaromanda X Aug 19 '18 at 04:04
  • @Jaromanda X, O'K, but what about make waiting `IeOnlyPolyfillTest.js` which below `console.log('Checkpoint 2')`? We don't know in advance what will be in `IeOnlyPolyfillTest.js` so cannot refer to anything in `IeOnlyPolyfillTest.js`. – Takeshi Tokugawa YD Aug 19 '18 at 04:08
  • Well, that's the problem with loading it dynamically ... all your code will have to wait in similar fashion - it's a real pain in the butt supporting IE - but, as I suggested, load the polyfill in a script tag - that way you KNOW it's loaded before any other code will even be parsed, let alone executed - why can't you do that? – Jaromanda X Aug 19 '18 at 04:09
  • all documentation regarding using babel-polyfill in a browser states that you include it in a script tag (not a dynamically created one) before all other code ... there is no simpler solution – Jaromanda X Aug 19 '18 at 04:12
  • @JaromandaX, you mean load it like ``? I can't do it because it's impossible to do it conditionally only for IE. Other modern browsers don't need **babel-polyfill**, so it will be just a burden for other browsers. – Takeshi Tokugawa YD Aug 19 '18 at 04:13
  • 1
    Do the browser detection on the server-side then. Or add all scripts dynamically in the fashion you've provided (which might have other unintended side-effects). – connexo Aug 19 '18 at 04:38
  • @connexo, O'K, I'll do. It will be answer. Thanks. – Takeshi Tokugawa YD Aug 19 '18 at 04:39
  • 1
    And btw, depending on the features you're using, Edge will sometimes need polyfills, too. – connexo Aug 19 '18 at 04:42
  • @connexo, well, I'll add Edge detection in condition. – Takeshi Tokugawa YD Aug 19 '18 at 04:45
  • 1
    Firefox support for some modern features might be behind a flag (which would have to be manually enabled by the browser user) as well. Make sure to **only** use features supported in all browsers which you don't serve the polyfills - older Safaris, Opera, KHTML, Konqueror, older mobile browser versions etc etc. – connexo Aug 19 '18 at 04:47
  • 2
    Or consider using `polyfill.io`. – connexo Aug 19 '18 at 04:49
  • well written pollyfills pollyfill conditionally - so there is no "burden" for browsers that don't need the pollyfill - except the first time they visit your page they download the polyfill - so that's an extra 29kB ... once ... and since all documentation for using that polyfill directly in a browser states you should put it in a script tag, then that's what you do - alternatively, rewrite every single bit of your code to wait for the polyfill to load before executing - this would be simple with Promises ... except IE needs a polyfill for Promises - catch 22 – Jaromanda X Aug 19 '18 at 06:03

0 Answers0