¿Cómo usar polyfill en JavaScript?

La web ha surgido con una amplia gama de nuevas tecnologías en los últimos años. A medida que surgen nuevas tecnologías, es posible que los navegadores más antiguos no las admitan de inmediato. Existe una amplia variedad de navegadores y versiones de navegadores en todo el mundo, cada uno con características ligeramente diferentes. Si bien las últimas versiones de los navegadores populares pueden realizar muchas tareas que los anteriores no pueden, aún puede ser necesario admitir las versiones anteriores. Puede ser un desafío integrar todas las funciones más recientes en el navegador, asegurando que nuestras aplicaciones funcionen de manera eficiente sin comprometer la funcionalidad de las nuevas.

Afortunadamente, Polyfill cubrió a los desarrolladores. Un polyfill proporciona las funciones y características que el desarrollador espera que el navegador ofrezca de forma predeterminada. Polyfill fue acuñado por Remy Sharp. Básicamente, quería un término para describir la reproducción de una API usando JavaScript (o Flash o lo que sea), si el navegador no lo tiene de forma nativa.

Polyfill y sus características:

• Poly significa que podría resolverse utilizando una amplia gama de técnicas, no se limitaba a hacerlo solo con JavaScript, y el relleno llenaría el espacio en el navegador donde se necesitaba la tecnología. Polyfill se puede ver como un material que llena los vacíos y las grietas para suavizar cualquier imperfección.
• La versión ES6 introdujo muchas funciones nuevas que aún no son totalmente compatibles con todos los navegadores. Si usamos las funciones de ES6, ES7 o ES8 en nuestro código, es posible que no funcione en algunos navegadores más antiguos debido a la falta de soporte para las nuevas funciones. Además de las construcciones de sintaxis y los operadores, las nuevas características del lenguaje también pueden incluir funciones integradas. Por lo tanto, usamos polyfill junto con un transpiler. Un polyfill es un fragmento de código que agrega funcionalidad a los navegadores más antiguos que tienen problemas de incompatibilidad.

En navegadores más antiguos, las siguientes características requieren compatibilidad con polyfill definiendo explícitamente las funciones:

Promesas, Array.from, Array.includes, Array.of, Map, Set, Symbol, object.values, etc.

¿Cómo usar polyfill en javascript? 

Exploraremos cómo funciona polyfill en node.js en este artículo. 

Enfoque: Usaremos promesas . Escribiremos las promesas en código ES6 y luego lo convertiremos en código ES5 para evitar los problemas de incompatibilidad de los navegadores más antiguos. A continuación, agregaremos este archivo polyfill babel de código ES5 de nuestros módulos de Node a nuestro archivo index.html para ejecutar el código en nuestro navegador. 

Paso 1: configuración del entorno

Un transpilador de Babel es una herramienta gratuita de código abierto que convierte el código ECMAScript 2015 (ES6) en una versión de JavaScript compatible con versiones anteriores que puede ejecutarse en navegadores antiguos y nuevos.  

Configuraremos nuestro proyecto y veremos el polyfill de Babel.

• Asegúrese de tener Node.js instalado en su máquina para ejecutar Babel polyfill.
• Cree un nuevo directorio de proyectos y ejecute el siguiente comando en su terminal para comenzar: npm init -y 

Inicializando npm 

• Ejecute el siguiente comando para instalar babel cli, core y preset.

npm install @babel/cli @babel/core @babel/preset-env --save-dev

Package.json: se verá así.

archivo paquete.json

• Babel-polyfill se instala junto con el paquete babel-core.
• Además, agregaremos es2015 a los valores predeterminados predefinidos, ya que estamos explorando cómo babel-polyfill convierte nuestro código para que funcione en navegadores más antiguos.

Ahora cree un archivo .babelrc y agregue el siguiente ajuste preestablecido:

{ "presets":["@babel/env"] }

archivo .babelrc 

Paso 2: Cree un archivo promises.js y escriba el siguiente código. Esto muestra las características de Polyfill y Promises y la consola registra el mensaje de saludo después de un intervalo de 3 segundos. 

// ES6 promises
  
const greet = new Promise((resolve, reject) => {
    setTimeout(function () {
        resolve("Welcome to GeeksforGeeks!");
        document.getElementById(
            "one"
        ).innerHTML = `Poly means that it could be 
        solved using a wide range of techniques it 
        wasn't limited to just being done using 
        JavaScript, and fill would fill the gap in 
        the browser where the technology was needed.`;
        document.getElementById(
            "two"
        ).innerHTML = `A polyfill is a piece of code 
        that adds functionality to older browsers 
        that have incompatibility issues.`;
        document.getElementById(
            "three"
        ).innerHTML = `In older browsers, Promises, 
        Array.from, Array.includes, Array.of, Map, 
        Set, Symbol, object.values, etc require 
        polyfill support by explicitly defining 
        the functions`;
        document.getElementById("four").innerHTML =
            "Promises represent uncompleted operations.";
    }, 3000);
});
  
greet.then((msg) => {
    console.log(msg);
});

Paso 3: Convierta las promesas de ES6 en código ES5 ejecutando el siguiente comando en su terminal:

npx babel <ES6 code file name> --out-file <ES5 code file name>
npx babel promises.js --out-file promises_es5.js

Salida: Esto creará un archivo promise_es5.js que contiene el código convertido. 

El código es6 se convierte en código es5 

Paso 4: Necesitamos incluir polyfill junto con el código ES5 compilado final. 

Cree un archivo index.html y agregue un encabezado con la etiqueta <h1>. Las características de polyfill en la etiqueta <li> y la descripción de Promises en la etiqueta <h4> se mostrarán después del intervalo de 3 segundos. Agregaremos el archivo babel-polyfill de los módulos de Node al archivo index.html donde queremos usar promesas para ejecutar el código en el navegador. 

<script type=”text/javascript” src=”node_modules/babel-polyfill/dist/polyfill.min.js”></script>
<script type=”text/javascript” src=”/promises_es5.js”>< /script>

Agregue el siguiente código al archivo index.html. 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <title>Polyfill</title>
</head>
<body>
    <h1 style="text-align: center;color: green;">
      Welcome to GeeksforGeeks : Polyfill testing
    </h1>
    <h1 style="text-align: center;color: green;"> 
      Polyfill-Features
    </h1>
    <h3>(The features will be displayed after 3 secs)</h3>
    <ul>
        <li id="one">
        </li>
        <li id="two">
  
        </li>
        <li id="three">
  
        </li>
    </ul>
    <h4>We have used promises to understand how to use polyfill</h4>
    <h1>Promises</h1>
    <h4 id="four"></h4>
    
    <!-- Polyfill.min.js file from node_modules and promise_es5 -->
    <script type="text/javascript" 
            src="node_modules/babel-polyfill/dist/polyfill.min.js">
    </script>
    <script type="text/javascript"
            src="/promises_es5.js">
    </script>
</body>
</html>

La estructura final de nuestro proyecto: Se verá así.

Estructura del proyecto 

Paso para ejecutar nuestra aplicación: Para iniciar un servidor, haga clic derecho en su archivo index.html y seleccione un servidor vivo abierto. 

Salida: Usando polyfill, podemos usar promesas. Las funciones de polyfill junto con una breve descripción de las promesas se mostrarán después de un intervalo de 3 segundos. 

Ahora actualice el navegador. Use la opción de inspección o presione ctrl + shift + i para abrir la ventana de la consola. Aparecerá un mensaje de saludo después de un intervalo de 3 segundos en la ventana de la consola. 

Salida: uso de promesas es6 con la ayuda de polyfill 

Referencia: https://developer.mozilla.org/en-US/docs/Glossary/Polyfill