2

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.

3
  • Existe algum motivo para vc querer da suporte ao IE8? Vc já verificou pelo Google Analytics por exemplo quantos dos seus usuários utilizam IE8?
    – hugocsl
    Commented 2/03/2020 às 14:40
  • Existe sim e infelizmente não tem a opção de não oferecer suporte Commented 2/03/2020 às 14:44
  • Vixi... boa sorte então por isso que eu prefiro Progressive Enhancement do que Graceful Degradation rss
    – hugocsl
    Commented 2/03/2020 às 15:05

1 Resposta 1

1
+50

O maior problema seu é que o IE8 suporta somente o ES3, então basicamente você precisa converter os scripts para essa versão.

Adicione os seguintes plugins a lista que você já tem:

@babel/plugin-transform-reserved-words @babel/plugin-transform-property-literals @babel/plugin-transform-member-expression-literals

Talvez você ainda possa ter alguns problemas conforme a propria documentação do babel neste link: https://babeljs.io/docs/en/caveats/

Outra coisa é desabilitar os modules(https://babeljs.io/docs/en/babel-preset-env#modules) e habilitar o loose(https://2ality.com/2015/12/babel6-loose-mode.html), o seu arquivo ficaria mais ou menos assim:

{
"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"]

]

}

Espero ter ajudado.

2
  • Funcionou cara! Porém a variável global var PIC = (window.PIC = window.PIC) || {};parou de funcionar em qualquer navegador, sabe se tem algum tipo de configuração para variáveis globais? Grato! Commented 4/03/2020 às 10:36
  • Não de cabeça, da uma olhada nas configurações do preset-env, o que é bem provavel é que você não tem o objeto window Commented 4/03/2020 às 12:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .