Elegir un empaquetador para código Javascript

 

Webpack o Browserify, ¿qué usar?

En la escuela cuando empiezas a diseñar y maquetar tus primeras páginas web, es muy común iniciar aprendiendo css (Cascade Styledsheet) y Javascript (el lenguaje por excelencia para ejecutar en un navegador), y haces algo cómo esto: 

style.css

#main{
 background-color: white;
 padding: 10px;
 margin: 5px;
 border: 5px dashed gray;
} 

#main .item{
 padding-top: 5px;
 padding-bottom: 10px;
}

#main ul li{
 display: block;
 list-style-type: none;
}

script.js

window.onload = function(){
  var element = document.getElementById('main')

 element.onclick = function(){
  alert("Elemento seleccinado");
  cambiarColor(this, 'green')
 }

 function cambiarColor(element, color){
  element.style.color =  color
 }
}

En principio con este tipo de sintaxis y archivos comenzamos nuestro camino por el desarrollo web, pero eso es el paraído comparado con la implementación y seguimiento a una aplicación de internet, aprenderás, de la mejor manera, que esa no es la forma más idónea de crear un sitio web. Para empezar debes aprender que existen dos tipos de denominaciones de desarrolladores que van de acuerdo a la especialización de cada ingeniero, frontend y backend, uno se refiere a todo el desarrollo del lado del cliente, (interfaz gráfica, animaciones, estilos, etc) y el otro se refiere al entorno detrás de la aplicación, es decir, del servidor (peticiones, autenticación, sesiones, API's), en nuestro tiempo es muy difícil especializarte sólo en una, la mayoría de nosotros tiene que saber, además de, el control de las animaciones, también cómo funciona la base de datos provista por el servidor.
En un entorno de desarrollo escalable, crear un sólo archivo para nuestro código en Javascript resulta muy díficil mantenerlo y agregarle nuevas funciones o crear clases o en una hoja de estilos CSS sería díficil cambiarle por ejemplo el tamaño a un componente sin desordenar todo lo demás.
Para solucionarlos los problemas se crearon herramientas que te permiten modularizar tu código, es decir, partir tu código, alojarlo en carpetas y modificarlo sin miedo a romper algo en alguna parte del mismo, hoy hablaremos de algunas de ellas para javascript ambas funcionan con node.

Browserify

Este empaquetador de código fue uno de los primero en salir, y en abstraer la forma en que NodeJs trabaja, te permite requerir cada archivo cómo si usarás RequireJS es decir de la siguiente forma:

main.js

var jquery      = require('jquery')
var bootstrap = require('bootstrap')
var modal      = bootstrap.modal
var element   = document.getElementById('modal')

new modal(element).show()

De esta forma puedes obtener jQuery y Bootstrap, partiendo ambos en archivos diferentes, y al requerirlos de esta forma, no mezclas tu código con el de ambas dependencias.
Browserify funciona a través de la línea de comandos, pero también tiene una API, es decir puedes configurarlo con un archivo javascript y usarlo con node para crear los archivos compilados, o usarlo con un manejador de paquetes cómo Gulp o Grunt.
Una de las ventajas de browserify, además de poder ser utilizado desde la línea de comandos, es que gracias a el puedes utilizar sintaxis de las nuevas especificaciones de ECMAScript, (el consorcio detrás de Javascript), browserify emula varias de las especificaciones y entiende lo que debe hacer con cada definición de variable, por ejemplo, la nueva especificación de la ECMAScript, crear una clase se hace de la siguiente forma

main-2017.js

class Persona{
 constructor(id, name){
   this.name = name
 }

 hablar(){
  alert(`Hola mi nombres es ${name}`)
 }
} 

var pedro = new Persona('pedro')
pedro.hablar()
//Muestra hola mi nombre es pedro

Por supuesto este es un ejemplo demasiado trivial, pero para fines prácticos, podemos asumir que nos vale. El código anterior no se podría ejecutar en el navegador, y para eso deberíamos hacer algo así:

main-browser.js

function Persona(name){
 this.name = name
}

Persona.prototype.hablar = function(){
 alert('Hola mi nombre es ' + this.name) 
}

var pedro = new Persona('pedro')
pedro.hablar()

Definitivamente es mucho más intuitivo utilizar la sintaxis de ECMAScript 2017. Además porque casi nadie sabe la existencia de el objeto prototype, que la mayoría de las variables de Javascript lo implementan. Este hace referencia al objeto en el cual se ha declarado la variable, por ejemplo, si tenemos una variable así n = "string" en su objeto prototype se encuentran todos los métodos de la clase String, porque es una instancia de la misma, lo mismo sucederá con una variable declarada cómo n = 8, que contiene la instancia Number, esto que hicimos browserify lo hace automáticamente, es decir puedes hacer un archivo llamado main.js y utilizar la sintaxis más reciente de javascript y browserify lo compilara a un archivo que el navegador pueda entender.

Webpack

Ya hablamos de unos de los primeras formas de hacer archivos utilizando sintaxis nueva de javascript, la siguiente herramienta, es mucho más reciente, pero igual de potente, Webpack no puede ser utilizado por línea de comandos la manera en Browserify si puede, la única forma de utilizarlo es a través de un archivo de configuración único llamado webpack.config.js el cual contiene todas las dependencias, plugins y operaciones con los archivos. Todo en un sólo lugar, esto aunque para algunos que estamos acostumbrados a tener todo en un mismo sitio, para algunos más puede resultar incómodo y díficil de tratar. El archivo normalmente se puede ver cómo algo así:

webpack.config.js

var path = require("path")
var HtmlWebpackPlugin = require("html-webpack-plugin")
var webpack = require("webpack")

module.exports = {
 //Punto de entrada
 entry: "./client/render/index.js",
 //Archivo de salida de la aplicación
 output: {
  filename: "bundle.js",
  path:  path.resolve('public')
 },
  //Módulos que serán integrados en la aplicación
  modules:{
   //Reglas de integración con RegExp
   rules: [{ test: /\.text/ , use: "raw-loader"}, {test: /\.txt/, use: "raw-serialize"}]
  },
  //Plugins para agregar a la aplicación
  plugins: [
   new webpack.optimize.UglifyJsPlugin(),
   new HtmlWebpackPlugin({template: "./src/index.html"})
  ]
}

Y así deberías poder agregar cada uno de los módulos y dependencias que tu aplicación necesite, al final con node compilas el código con el archivo de configuración y obtiene los archivo necesario y al igual que con browserify también puedes utilizar la sintaxis más reciente de javascript.

Cómo verás ambos tienen un poco de ventajas y desventajas, para los que no estemos acostumbrados a la consola, browserify se nos dificultará mucho, y para los que nos perdemos con un archivo de configuración que a medida que la aplicación crece se vuelve más y más grande nos perdemos, webpack no será nuestra primera opción, y aunque webpack está ganando popularidad en los últimos meses, y eso tal vez se deba a que es más nuevo que browserify, tal vez cuando se toque el tema de escalabilidad sea necesario probar su eficacia, en cuanto a mi respecta, utilizó browserify, porque en mi opinión muy personal los archivos de configuración grandes, les resulta muy difícil ser escalables.