Ya sea si usas Javascript en el navegador o Javascript desde Nodejs, cuando desarrollamos aplicaciones, es necesario ir separando nuestro codigo en multiples archivos.

Bueno debes que se creo Javascript, ha existido varias formas de hacer esto, asi que en este video a modo de que conoscas más y sobretodo entiendas como funciona la separacion de logica en multiples archivos, vamos a aprender los modulos de Javascript o Javascript ES6 Modules llamado asi porque estos fueron introducidos desde la versiones 6 de Ecmascript.

Tambien en este ejemplo te mostraré como funcionan en Typescript, ya que al final Typescript el codigo final es convertido a Javascript.

Scripts Clasicos

Cuando declaramos variables al inicio son globales.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Hello world</title>
</head>
<body>
  <script src="./mymodule.js"></script>
  <script src="./index.js"></script>
</body>
</html>

index.js

console.log(hello)

mymodule.js

let hello = "Hello world"

Javascript ES6 Modules

Bueno lo que nos ofrece el standard de Javascript actualmente es que ya no necesitamos importar multiples archivos e importarlos con scripts. basicamente podemos importar solo uno y el resto lo podemos ir ampliando con una palabras claves llamadas import y export

Hello world

index.js

import { hello } from './mymodule.js'
console.log(a);

export let hello = "Hello world";

Cuando usamos los modulos de Javascript es necesario:

siempre añadir la extension .js
usar las rutas para importar archivos ./

Imports & Exports

Con los import y exports podemos importar y exportar practicamente cualquier tipo de dato de Javascript.

User.js

class User {
  constructor(name, password) {
    this.name = name;
    this.password = password;
  }

  showInfo() {
    return `I'am ${this.name} and this is my password: ${this.password}`;
  }
}

// const user = new User("fazt", "fazt123")
// user.showInfo()

ahora como queremos usar esta clase desde otros archivos vamos tener que exportarlo.

para poder exportarlo podemo usar export y/o export default

export {}

export {User}

usando esta sintaxis podemos seleccionar que miembros queremos exportar fuera de este archivo. por ejemplo si yo exporto la clase User y no users, veremos que no puedo importar luego users solo User

const users = []
export { User }

index.js

import {User} from './User.js'

const user = new User("fazt", "fazt123")

export default

usando la sintaxis anterior quiere decir que el que importa mi modulo debe seleccionar que quiere de alli. pero que pasa si el no se decide por uno, bueno nosotros podemos decirle que si el no importa algo, podemos darle algo por defecto.

export default & export {}

el tener la opcion por defecto y el export no significa que tenemos que exportar solo uno de ellos, de hecho podemos usar ambos.

class User {
    ...
}

export { User }
export default User

Archivo index.js

* models
    * User
    * Product
    * Products
    * Category

const user = new MyUser("FAZT", "ASDASD");
user

const user2 = new User("Ryan", "ryan123")
user2

export con declaraciones

exportar un archivo no requiere que este al final del archivo. Puede exportar apenas declaras una varaible, y de nuevo no importa si esta contiene cualquier tipo de dato (objecto, arreglo, string, number, function, etc)

export const hello = "hello world";
export const num = 12;
export const myObject = {
  name: "Ryan Ray",
};
export const names = ["1", 10, 30];
export const add = function (x, y) {
  return a + y;
};
export function multiply(a, b) {
  return a * b;
}
export const subtract = (x, y) => x - y;

index.js

import {
  hello,
  add,
  multiply,
  myObject,
  names,
  num,
  subtract,
} from "./mymodule.js";

console.log(hello);
console.log(add(30, 20));
console.log(multiply(10, 2));
console.log(myObject.name);
console.log(names);
console.log(num);
console.log(subtract);

algo más a notar es que no tienen un orden al importar elementos.

import *

por lo general cuando importamos tenemos una tendencia a extraer solos los elementos que queremos pero de hecho podemos tambien importarlos todos con una sola importacion.

import * as myModule from './mymodule.js'

console.log(myModule.hello);
console.log(myModule.add(30, 20));
console.log(myModule.multiply(10, 2));
console.log(myModule.myObject.name);
console.log(myModule.names);
console.log(myModule.num);
console.log(myModule.subtract);

esto es util cuando hay modulos que no ofrecen un export default.

pero si el modulo exportar un default seria asi:

export default {
  hello,
  num,
  myObject,
  names,
  add,
  multiply,
  subtract,
};

import myModule from './module/one.js'

console.log(myModule.hello);
console.log(myModule.add(30, 20));
console.log(myModule.multiply(10, 2));
console.log(myModule.myObject.name);
console.log(myModule.names);
console.log(myModule.num);
console.log(myModule.subtract);

as

one two

Herramientas

JSDoc

Suport

<script nomodule

si el navegador es moderno usara el modulo de type=module

si no lo soporat usara este. aqui basicamente colocarias tu codigo para versiones anteirores que no usan modulos. pero en la practica es mejor usar Herramientas como babel que hacen la conversion por ti.

Scripts Clasicos

Javascript ES6 Modules

Imports & Exports

export {}

export default

export default & export {}

Archivo index.js

export con declaraciones

import *

as

Herramientas

Suport

importar todo el archivo

cargar asincronamente archivos

Más Recursos