Parcel js y Javascript Bundles sencillos.

Parcel js es una de los JavaScript Bundles mas sencillos que existe . ¿Qué es un JavaScript Bundle? . Un JavaScript Bundle nos permite empaquetar de forma rápida un conjunto de clases o funciones de JavaScript que se encuentran diseminadas en ficheros independientes como un único fichero de tal forma que en el navegador pueda ser cargado como una única referencia de forma rápida y transparente para el desarrollador.

Parcel.js

Vamos a ver un ejemplo que haga uso de esta herramienta . El primer paso es instalar Parcel . Para ello será suficiente con ejecutar:

npm install -g parcel

Esto nos instalará a nivel global la herramienta y nos permitirá de una forma muy transparente trabajar con todas las clases de JavaScript bien organizadas para que luego en un sencillo paso Parcel nos lo transforme en una carpeta de distribución que incluya un único fichero. Veamos un ejemplo rápido:

export class Persona {

    constructor(nombre,edad) {

        this.nombre= nombre;
        this.edad=edad;
    }


}

export class Calculadora {

        static sumar(a,b) {

            return a+b;
        }

}

//main.js
import {Calculadora} from "./calculadora.js"
import {Persona} from "./persona.js"

let p1= new Persona("pedro",20);
let p2= new Persona ("ana",30);

let total= Calculadora.sumar(p1.edad,p2.edad);
console.log(total);

Una vez construido el código es suficiente con generar un fichero html que invoque al fichero main.js que es el que importa el resto . Serviría un código tan sencillo como :

<html>
    <head>
        <script type="text/javascript" src="main.js">
        
        </script>
    </head>
<body>
hola

</body>

</html>

Realizada esta operación , nos queda ejecutar la herramienta de parcel en la carpeta que nos encontremos desde la linea de comandos

Esto nos generará una carpeta de distribución con nuestro html original y un bundle de JavaScript que incluye todas nuestras clases.

Hecho esto será suficiente publicar via web esta carpeta en el servidor con el que estemos trabajando y veremos como por la consola nos suma las edades de las personas.