Lección 15: Importaciones

Para ordenar y estructurar una aplicación, JavaScript nos ofrece una serie de herramientas, llamado sistema de módulos, para la exportación e importación. Permite obtener variables, invocar funciones o instanciar objetos de otros ficheros.

Vamos a aprender a utilizarlo con una práctica muy habitual. Haremos que un fichero JavaScript importe una variable y función de otro lugar.

1- Creamos un fichero llamado tienda.js con el siguiente contenido.

export const nombre = 'Alpine';

export function tiendasAbiertas() {
  return Math.floor(Math.random() * 10);
}

Es clave que usemos export en cada elemento que deseamos hacer accesible.

2- Creamos otro fichero JavaScript llamado index.js. Será quién importe el fichero anterior.

// Importaciones
import {nombre, tiendasAbiertas} from './tienda.js';

document.body.textContent = `La tienda se llama ${nombre} y hay ${tiendasAbiertas()} abiertas.`

3- Construimos un archivo HTML con el nombre index.html. Importaremos el fichero anterior con <script> y utilizando type="module".

<script type="module" src="index.js"></script>

Una posible estructura podría ser:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="module" src="index.js"></script>
</head>
<body>

</body>
</html>

No es necesario añadir defer, se aplica por defecto.

4- Levantamos un servidor HTTP. El sistema de módulos no funciona si abrimos el HTML desde el disco duro por temas de seguridad. Por lo que si lo abres con doble clic te fallará. Debemos interactuar con un servidor web que lo sirva.

Con node puedes instalar un servidor muy básico y levantarlo.

npm install -g http-server
http-server . -p 8000

Ahora abre localhost:8000 en tu navegador favorito para ver los resultados.

Extra: Servidor con refresco automático

Cuando desarrollo me gusta trabajar con browser-sync. Es un servidor que se encarga de vigilar si hay cambios en los ficheros y refresca automáticamente el navegador. Además sincroniza los eventos, como el scroll, en todos los dispositivos que tenga abierta la ruta.

npm install -g browser-sync
browser-sync start --server --files "*.html" "css/*.css" "js/*.js"

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

No te sientas obligado a realizarme una donación, pero cada aportación me ayuda a mantener el sitio en activo para que continúe existiendo y me motiva a continuar creando nuevo contenido.

Comprame un café
Pulsa sobre la imagen
  • 1 café: Se mantiene el dominio durante 4 meses.
  • 2 cafés: Se paga 1 mes de servidor.
  • 3 cafés: Se cubre 1 mes de Black box.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica  {{ formatEllipsisAuthor(replyComment.author) }}

Acepto la política de Protección de Datos.

Escribe el primer comentario