Estou tentando fazer um polyfill de um script para que funcione com IE8+, porém o mesmo resolve alguns problemas mas gera outros:
Minha configuração do .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"]
]
}
O script após o 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);
});
};
Porém mesmo com o Polyfill o IE da problema com: 'require' não está definido Já tentei diversas formas de configuração do .babelrc, mas não consegui alguma que funcionasse no IE8.