Cómo utilizar las últimas funciones de JavaScript en cualquier navegador

JavaScript es un lenguaje que está evolucionando muy rápidamente y en ocasiones queremos usar sus últimas funciones, pero si nuestro navegador o entorno no lo permite directamente, tendremos que transpilarlo para que lo haga.



La transpilación es la transformación del código fuente escrito en un idioma a otro con un nivel de abstracción comparable. Por lo tanto, en el caso de JavaScript, el transpilador toma una sintaxis que los navegadores más antiguos no entienden y la convierte en una sintaxis que entienden.

Polyfilling vs. Transpiling

Ambos métodos funcionan con el mismo propósito: podemos escribir código que use nuevas características que no están implementadas en nuestro entorno de destino y luego aplicar uno de estos métodos.



Un polyfill es un fragmento de código que implementa características modernas para que se puedan aplicar para trabajar en versiones anteriores del navegador.



Transpilar es una combinación de dos palabras: transformar - transformar y compilar

- compilar. A veces, no se puede implementar una nueva sintaxis con polyfills, en cuyo caso usamos un transpilador.



Imaginemos que estamos usando un navegador antiguo que no admite la función Number.isNaNintroducido en la especificación ES6. Para usar esta función, necesitamos crear un polyfill para este método, pero solo lo necesitamos si aún no está disponible en el navegador.



Para hacer esto, crearemos una función que imita el comportamiento de la función isNaN y la agregaremos a la propiedad Number del prototipo.

//  isNaN
if (!Number.isNan) {//  .
    Number.prototype.isNaN = function isNaN(n) {
        return n !== n;
    };
}
let myNumber = 100;
console.log(myNumber.isNaN(100));

Ahora vamos a transpilar el código de la función recién creada. Imaginemos que la mayoría de los navegadores no pueden cumplir con esta función, en cuyo caso no podemos crear un polyfill para simular el comportamiento. Queremos ejecutar el siguiente código en Internet Explorer 11, así que lo vamos a transformar usando un transpilador:

class mySuperClass {
  constructor(name) {
    this.name = name;
  }
hello() {
    return "Hello:" +this.name;
  }
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); 
//Hello Rick

El código resultante se ha portado usando el transpilador en línea de Babel , y ahora podemos ejecutarlo en Internet Explorer 11:

"use strict";
function _instanceof(left, right) { if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) { return !!right[Symbol.hasInstance](left); } else { return left instanceof right; } }
function _classCallCheck(instance, Constructor) { if (!_instanceof(instance, Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
  function mySuperClass(name) {
    _classCallCheck(this, mySuperClass);
this.name = name;
  }
_createClass(mySuperClass, [{
    key: "hello",
    value: function hello() {
      return "Hello:" + this.name;
    }
  }]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); //Hello Rick

Uno de los transpilers de JavaScript más comunes es Babel. Babel es una herramienta que se creó para ayudar a portar su código entre diferentes versiones de JavaScript y se puede instalar a través del Administrador de paquetes de nodo (npm).



Babel se ha convertido en el estándar para compilar aplicaciones ECMAScript en una versión de ECMAScript que funciona en navegadores que no admiten dichas aplicaciones. Babel puede compilar otras versiones de ECMAScript como React JSX.



En los siguientes pasos, veremos cómo usar Babel para transpilar y ejecutar la clase mySuperMethod anterior en una máquina Linux con el antiguo Node.js instalado . En otros sistemas operativos, como Windows 10 o macOS, los pasos son similares.



Nota. Debe tener Node.js instalado en su computadora . Npm se ha agregado como una función al instalador de Node.js.



1. Abra un símbolo del sistema y cree un directorio llamado babelExample:

/mkdir babelExample
/cd babelExample

2. Cree un proyecto npm y deje los valores predeterminados. El siguiente comando creará un archivo llamado package.json:

npm init

captura de pantalla del contenido del archivo package.json después de la ejecución del comando npm init



Aquí index.js (el nombre del archivo puede ser diferente) es el punto de entrada a nuestra aplicación. Aquí es donde vamos a poner nuestro código javascript, así que crea un archivo index.js y coloca el siguiente código en él:

class mySuperClass {
  constructor(name) {
    this.name = name;
  }
hello() {
    return "Hello:" +this.name;
  }
}
const mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello()); 
//Hello Rick

3. Si bien podemos instalar la CLI de Babel de forma global, es mejor hacerlo de forma local, proyecto por proyecto. El siguiente comando agregará el directorio node_modules y modificará el archivo package.json para agregar dependencias de Babel:

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

captura de pantalla de package.json con dependencias de babel



4. Agregue el archivo de configuración .babelrc a la raíz del proyecto e incluya complementos para las transformaciones de ES2015 +.



Nota. En Babel, cada transformador es un plugin que podemos instalar individualmente. Cada ajuste preestablecido es una colección de complementos relacionados. Al usar ajustes preestablecidos, no necesitamos instalar y actualizar docenas de complementos nosotros mismos.



Establezca una configuración predeterminada para todas las funciones de ES6 (contiene un grupo de complementos):

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

captura de pantalla de package.json con dependencia preestablecida-env de babel



Edite el archivo .babelrc y agregue la configuración que incluye transformaciones para ES6.



Escriba el siguiente código en su archivo .babelrc:

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

5.



Nota de uso . Si está utilizando Windows 10 PowerShell, tenga cuidado con la codificación de sus archivos, ya que puede obtener errores de análisis al iniciar Babel. Es deseable que los archivos estén en codificación UTF-8.



input: index.js

output: out folder (Babel dejará los archivos migrados aquí)



Directamente ejecutando el siguiente comando en la consola:

./node_modules/.bin/babel index.js -d out

Con un script npm agregando la siguiente línea a su archivo package.json:

"build": "babel index.js -d out"

captura de pantalla del contenido del archivo package.json después de agregar el script de compilación



Ejecute el siguiente comando:

npm run build

En ambos casos, obtiene en la carpeta de salida un archivo (o archivos) transpilado en un navegador listo para usar que no admite la sintaxis de clase ES6, el código es:

"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
var mySuperClass = /*#__PURE__*/function () {
  function mySuperClass(name) {
    _classCallCheck(this, mySuperClass);
this.name = name;
  }
_createClass(mySuperClass, [{
    key: "hello",
    value: function hello() {
      return "Hello:" + this.name;
    }
  }]);
return mySuperClass;
}();
var mySuperClassInstance = new mySuperClass("Rick");
console.log(mySuperClassInstance.hello());

Conclusión

El lenguaje JavaScript cambia constantemente y, gracias a estas herramientas, podemos escribir código con nueva sintaxis y nuevas funciones que aún no se han implementado en todas las versiones de los navegadores.



Espero que hayas disfrutado de este artículo. Transmito este y muchos otros artículos útiles para desarrolladores de Frontend principiantes en el canal de Telegram Frontend.school () , donde también preparo pruebas útiles para poner a prueba mis conocimientos. Llamo su atención sobre el hecho de que el canal es puramente un pasatiempo y un deseo de ayudar y no me aporta beneficios materiales.