Esta semana ha sido una semana muy interesante en la oficina, de esas en las que acabas aprendiendo un montón de cosas nuevas mientras haces tu trabajo... Lo que viene siendo una buena semana :).

Si me tengo que quedar con algo que realmente me ha gustado aprender es con la capacidad que tiene Webpack de definir las rutas de los módulos. Lo hace de la siguiente forma:

const MyComponent = require(`${component}/${name}/${type}`)  

¿Qué tiene este require de especial? Pues que la ruta del fichero no se define en el momento de escribir el programa, sino que es definida en runtime. Para mí este ha sido todo un descubrimiento y el potencial es brutal.

Lo primero que hay que hacer es definir un contexto de petición. En él se debe indicar (1) un directorio base; (2) si debe hacerse o no una búsqueda en los subdirectorios partiendo de esa base; y (3) una expresión regular que defina un tipo de fichero.

Tomemos como ejemplo un proyecto como el siguiente:

.
├── components
│   ├── dos
│   │   ├── index.js
│   │   └── index.scss
│   ├── tres
│   │   ├── index.js
│   │   └── index.scss
│   └── uno
│       ├── index.js
│       └── index.scss
└── entry.js

Supongamos que estamos en el fichero entry.js y deseamos crear un contexto de peticiones para todos los ficheros JS:

const req = require.context('./components', true, /^.*\/index\.js/);  

Mi contexto de petición parte de la raíz de la carpeta components; hago una búsqueda en todos los subdirectorios y solo agrego al contexto los ficheros que acaban con el nombre index.js

Ahora que tengo mi contexto, puedo hacer peticiones que pueden ser resueltas en runtime:

const Component = req(`${name}/index.js`)  

Si name vale uno, es como si hiciera la petición req('./components/uno/index.js'), así que obtengo correctamente el módulo que se exporta en ese fichero. Lo mismo pasaría con cualquier valor de la variable name.

Claro que esto no es magia y, si lo haces, tienes que saber muy bien lo que estás haciendo. Por ejemplo, cuando creas el bundle, Webpack no puede saber qué módulo vas a pedir en runtime (¿el módulo uno? ¿el dos? ¿el tres??), así que los incluye a TODOS en el bundle final. Además, crea un diccionario donde asocia la ruta uno/index.js con el valor exportado por ./components/uno/index.js, y así con todos los demás.

Así que, no obstante las enormes ventajas, piénsatelo dos veces antes de usarlo, ya que puedes hacer crecer el tamaño de tu bundle más de lo que te gustaría.

Si te ha gustado este post, difunde la palabra. Tampoco dudes en dejar comentarios u observaciones. ¡Gracias! :)

Suscríbete a mi lista de correo

* Campos obligatorios