¿Por qué usamos empaquetadores de JavaScript?
Tags: javascript, beginners
Published: 2022-02-09 06:18:06

JavaScript es un lenguaje intérprete y no necesita compilación. Su navegador puede ejecutar el mismo código que usted escribe. Entonces, ¿por qué usamos empaquetadores de JavaScript?

## Menos archivos JS

Históricamente, la cantidad de archivos JS utilizados por un sitio web era crucial debido a la penalización en el rendimiento de tener muchos archivos pequeños. Los navegadores cargaron cada archivo con una solicitud HTTP separada. Cada solicitud necesitaba una conexión entre el navegador y el servidor, y se necesitaba tiempo para establecerla. Gracias a HTTP/2, la cantidad de archivos es un problema mucho menor ahora. Aun así, tener archivos agrupados tiene sentido. Cada solicitud se almacena en caché por separado, por lo que tener muchos archivos hace que sea más difícil garantizar que el navegador no obtenga código obsoleto del caché.

Además de eso, hasta 2018, muchos navegadores no admitían módulos ES. Simplemente estaba cargando muchos archivos desde el HTML, y todos compartían el mismo alcance global. Los paquetes de JS abordan ambos problemas, ya que
* le permite mantener su base de código dividida en muchos archivos bien definidos y
* agrupar el código en archivos grandes para su implementación.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f4nwrmbhwsi5kxxmw5cl.jpg)

## Fácil importación desde `node_modules`

Los paquetes le brindan una forma de importar dependencias, que es mucho mejor que cargarlos como módulos ES. Para usar paquetes de node desde el navegador, necesitaría
* implementar `node_modules` en su servidor de producción, y
* use una ruta relativa desde su archivo al archivo que desea importar
La ruta relativa es un gran dolor de cabeza porque te obliga a escribir la importación de forma ligeramente diferente dependiendo de qué tan profundo estés en la estructura de carpetas. Entonces, para usar Lodash, tendrías:

```JS
// en ./src/core.js 
var _ = require('../node_modules/lodash/lodash.js');

// en ./src/app/main.js
var _ = require('../../node_modules/lodash/lodash.js');
```

Los empaquetadores te permiten escribir simplemente:

```JS
// en cualquier lugar
var _ = require('lodash');
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hd4fz9dh9m0p5soec14u.jpg)

## Importar otros tipos de archivos

Su base de código no es solo JavaScript. Cuando organice su código por componentes o rutas, cada uno vendrá con su propia plantilla y estilo. Los módulos nativos de ES no le permiten importar tipos de recursos que no sean JS. Esta limitación le haría importar el CSS del HTML, mientras que el resto del componente se importa en JavaScript —lo que le obligaría a mantener sincronizados dos archivos no relacionados. Los paquetes JS solucionan este problema al permitirle administrar todas esas dependencias directamente desde sus archivos JS:

```JS
import ‘./core.js’;
import ‘./style.css’;

const template = require(‘./view.html’);
```


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pa6fiwnnrbpk9qx4afpj.jpg)

## Transpilar código

Una gran cantidad de JavaScript no es JavaScript simple; está escrito en lenguajes como TypeScript y luego compilado en JavaScript. Esta compilación de código a código se llama transpilación. La mayor parte del JavaScript se transpila por varias razones.

### Minificación de código

Si está escribiendo su código como debería, está haciendo lo siguiente:
* dar nombres significativos a las variables
* sangrado del código
* dejando comentarios para otros desarrolladores

Esto agrega desorden que no significa nada para el intérprete. La minificación es el primer paso para reducir el tamaño de la carga útil. Elimina todo lo que no tiene impacto en su aplicación.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bezdvdwqu4a4wm0s88e2.jpg)

### Versión anterior para navegadores más antiguos

A medida que el lenguaje recibe nuevas características, existe este período durante el cual
* los desarrolladores ya quieren usarlo, y
* no todos los navegadores lo admiten.

Afortunadamente, este período se está acortando significativamente gracias al navegador evergreen, pero aún existe la necesidad de un proyecto como Babel. Babel le permite usar la versión de idioma más reciente mientras codifica y transpilarla a una versión que entenderá el navegador anterior.

### Sabores de JavaScript
Además del JavaScript simple, puede usar muchos de sus sabores:

* TypeScript 
* PureScript
* Elm
* CoffeeScript

Los paquetes de JavaScript pueden manejar incluso la mezcla de diferentes sabores en un proyecto —lo que parece una mala idea hasta que terminas trabajando con código heredado y necesitas mucha flexibilidad para elegir las prioridades correctas.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lw2qg1kswx3vdskjl8vw.jpg)

## Construcción separada para diferentes casos de uso

Una vez que comienza a compilar su código con un paquete, surgen nuevas posibilidades. Desde el principio, lo más probable es que compile el código de una forma para la producción y de otra para el desarrollo local. Si escribe pruebas unitarias, tal vez le interese saber qué tan bien cubren su código. Hay herramientas de cobertura de código que hacen exactamente esto. Requieren una compilación dedicada que incluya herramientas que cuenten las visitas a cada línea de código durante la ejecución de la prueba.

## ¿Y usted?

¿Qué paquete JS planea usar en su próximo proyecto? Házmelo saber en la [encuesta](https://strawpoll.com/2gpdcr2g3), para saber cuál debería llamar más la atención en este blog.

## ¿Qué sigue?

Puede consultar mi artículo sobre el uso de [módulos ES nativos] (https://conoce.dev/como-utilizar-los-modulos-nativos-de-es), o:
* [mi video curso para esbuild](https://bit.ly/esbuild-course)
* [mi video curso para webpack](https://bit.ly/WebpackCourse)