Polyfill with Gulp and Babel

Question

I’m trying to polyfill a script to work with IE8+, but it solves some problems but generates others:

My configuration of .babelrc

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "edge": "17",
                    "ie": "8",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1"
                },
                "corejs": 3,
                "useBuiltIns": "usage"
            }
        ]
    ],
    "plugins": [
        ["@babel/plugin-transform-runtime"],
        ["@babel/plugin-syntax-dynamic-import"]
    ]
}

The script after polyfill:

"use strict";

require("core-js/modules/es.array.for-each");

require("core-js/modules/es.array.index-of");

require("core-js/modules/es.object.to-string");

require("core-js/modules/es.promise");

require("core-js/modules/es.regexp.exec");

require("core-js/modules/es.string.replace");

require("core-js/modules/es.string.split");

require("core-js/modules/web.dom-collections.for-each");

var PIC = (window.PIC = window.PIC) || {};

var loadScript = function loadScript(source, beforeEl) {
  var async = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  var defer = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  return new Promise(function (resolve, reject) {
    var script = document.createElement('script');
    var prior = beforeEl || document.getElementsByTagName('head')[0];
    script.async = async;
    script.defer = defer;

    function onloadHander(_, isAbort) {
      if (isAbort || !script.readyState || /loaded|complete/.test(script.readyState)) {
        script.onload = null;
        script.onreadystatechange = null;
        script = undefined;

        if (isAbort) {
          reject();
        } else {
          resolve();
        }
      }
    }

    script.onload = onloadHander;
    script.onreadystatechange = onloadHander;
    script.src = source;
    prior.insertAdjacentElement('beforeend', script);
  });
};

var loadStyle = function loadStyle(source, beforeEl) {
  var async = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
  var defer = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
  return new Promise(function (resolve, reject) {
    var style = document.createElement('link');
    var prior = beforeEl || document.getElementsByTagName('head')[0];
    style.async = async;
    style.defer = defer;

    function onloadHander(_, isAbort) {
      if (isAbort || !style.readyState || /loaded|complete/.test(style.readyState)) {
        style.onload = null;
        style.onreadystatechange = null;
        style = undefined;

        if (isAbort) {
          reject();
        } else {
          resolve();
        }
      }
    }

    style.onload = onloadHander;
    style.onreadystatechange = onloadHander;
    style.rel = "stylesheet";
    style.type = "text/css";
    style.href = source;
    prior.insertAdjacentElement('beforeend', style);
  });
};

But even with Polyfill the IE of the problem with: 'require' is not set I have tried several ways of configuring .babelrc, but I couldn’t get any that worked on IE8.

Answer 1

Your biggest problem is that IE8 only supports ES3, so basically you need to convert the scripts to that version.

Add the following plugins to the list you already have:

@Babel/plugin-Transform-reserved-words @Babel/plugin-Transform-Property-literals @Babel/plugin-Transform-Member-Expression-literals

Maybe you may still have some problems with the Babel documentation itself at this link: https://babeljs.io/docs/en/caveats/

Another thing is to disable modules(https://babeljs.io/docs/en/babel-preset-env#modules) and enable the Oose(https://2ality.com/2015/12/babel6-loose-mode.html), your file would look something like this:

{
"presets": [
    [
        "@babel/preset-env",
        {
            "targets": {
                "edge": "17",
                "ie": "8",
                "firefox": "60",
                "chrome": "67",
                "safari": "11.1"
            },
            "corejs": 3,
            "loose": true,
            "modules": false,
            "useBuiltIns": "usage"
        }
    ]
],
"plugins": [
    ["@babel/plugin-transform-runtime"],
    ["@babel/plugin-syntax-dynamic-import"],
    ["@babel/plugin-transform-reserved-words"],
    ["@babel/plugin-transform-property-literals"],
    ["@babel/plugin-transform-member-expression-literals"]

]

}

I hope I’ve helped.