Cuando trabajamos con clases la mejor forma de organizar el código es poniendo cada clase un su propio fichero javascript. Esto reduce el acoplamiento de nuestro código y nos permite reutilizar una clase en cualquier proyecto en que la necesitemos.
Sin embargo tener muchos ficheros hace que tengamos que importarlos todos, y en el orden adecuado, en nuestro index.html (mediante etiquetas <script src="...">) lo que empieza a ser engorroso.
Para evitar este problema se utilizan los module bundlers o empaquetadores de código que unen todo el código de los distintos ficheros javascript en un único fichero que es el que se importa en el index.html.
Además proporciona otras ventajas:
Nosotros usaremos el bundler *webpack que es el más usado en entorno frontend. Junto a npm tendremos una forma fácil y práctica de empaquetar el código.
Para que un fichero pueda tener acceso a código de otro fichero hay que hacer 2 cosas:
Esto es lo que hacíamos en el ejercicio de la frase para poder pasar los tests y lo que haremos con los ficheros donde declaramos clases.
En el caso de un fichero con una función a exportar será lo que exportaremos. Por ejemplo:
// Fichero cuadrado.js
const cuadrado = (value) => value * value
module.exports = cuadrado
En el caso de querer exportar muchas funciones lo más sencillo es exportarlas juntas en un objeto como en el fichero functions.js:
module.exports = {
letras,
palabras,
maysc,
titulo,
letrasReves,
palabrasReves,
palindromo
}
Aquí estamos exportando un objeto que contiene una serie de funciones
Si es un fichero que define una clase la exportamos tal cual:
class Product {
constructor() {
}
...
}
module.exports = Product
En el fichero donde vayamos a usar dicho código lo importamos a una variable. Si se trata de una única función:
const cuadrado = require('./cuadrado.js')
console.log('El cuadrado de 2 es ' + cuadrado(2))
Si es un fichero con muchas funciones exportadas a un objeto podemos importar sólo las que queramos o todas:
const functions = require('./functions.js')
console.log('Las letras de "Hola" son ' + functions.letras("Hola") + ' y al revés es ' + functions.letrasReves('Hola'))
o bien
const { letras, letrasReves } = require('./functions.js')
console.log('Las letras de "Hola" son ' + letras("Hola") + ' y al revés es ' + letrasReves('Hola'))
Para usar una clase la importamos:
const Product = require('./product.class')
const myProd = new Product()
Una vez que tenemos nuestro código correctamente exportado e importado vamos a usar webpack para empaquetarlo.
Lo primero que habría que hacer es crear nuestro proyecto si no lo hemos hecho ya mediante npm init. Esto inicializa el proyecto y crea el fichero package.json. Recuerda escribir jest cuando nos pregunte por los tests.
Para usar webpack simplemente lo incluímos mediante npm:
npm i -D webpack webpack-cli
La opción -D instala webpack como dependencia de desarrollo, lo que significa que en la versión de producción del código no se incluirá.
Para instalar todas nuestras dependencias y que se cree la carpeta node_modules ejecutamos npm install.
Ahora ya estamos listos para usar webpack. Como hemos dicho es un module bundler, es decir, un empaquetador de código. Toma el fichero que le indiquemos como fichero principal (por defecto el ./src/index.js), lo junta con todas sus dependencias (sus require y los de sus dependencias) y los transpila a un único fichero (por defecto ./dist/main.js) que es el que se enlaza en el index.html. Además minimiza y optimiza dicho código al generarlo.
Para generar el código empaquetado ejecutamos
npx webpack --mode=development
Este código hay que ejecutarlo cada vez que se hagan cambios en el código. Si no quieres tener que ejecutarlo cada vez se puede lanzar con la opción --watch que deja la consola abierta y ejecuta el comando automáticamente cuando guardamos cualquiera de los ficheros del proyecto:
npx webpack --mode=development --watch
Si nuestro fichero principal no es src/index.js lo indicaremos con la opción --entry:
npx webpack --entry=scripts/main.js --mode=development
Cuando usamos webpack le tenemos que indicar que tipo de código de salida queremos:
Podéis obtener más información en infinidad de páginas de internet y en la web oficial de webpack. Las diferentes opciones que podemos pasarle a este comando las podemos consultar en la página del CLI de webpack.