Introducción

ES6 (ECMAScript 2015) introdujo un sistema de módulos estandarizado para JavaScript, revolucionando la forma en que organizamos y compartimos código. En este artículo, exploraremos los entresijos de las importaciones de ES6, brindando ejemplos del mundo real y un proyecto de demostración para ilustrar su poder y flexibilidad.

Tabla de contenido

1. Sintaxis de importación básica
2. Exportaciones e importaciones nombradas
3. Exportaciones e importaciones predeterminadas
4. Mezcla de exportaciones predeterminadas y con nombre
5. Renombrar importaciones
6. Importar todas las exportaciones como un objeto
7. Importaciones dinámicas
8. Ejemplos del mundo real
9. Proyecto de demostración: Administrador de tareas
10. Mejores prácticas y consejos
11. Conclusión

Sintaxis básica de importación

La sintaxis básica para importar en ES6 es:

import { something } from './module-file.js';

Esto importa una exportación con nombre llamada algo del archivo module-file.js en el mismo directorio.

Exportaciones e importaciones nombradas

Las exportaciones con nombre le permiten exportar múltiples valores desde un módulo:

// math.js
export const add = (a, b) => a   b;
export const subtract = (a, b) => a - b;

// main.js
import { add, subtract } from './math.js';

console.log(add(5, 3));      // Output: 8
console.log(subtract(10, 4)); // Output: 6

Exportaciones e importaciones predeterminadas

Las exportaciones predeterminadas proporcionan un valor exportado principal para un módulo:

// greet.js
export default function greet(name) {
  return `Hello, ${name}!`;
}

// main.js
import greet from './greet.js';

console.log(greet('Alice')); // Output: Hello, Alice!

Mezclar exportaciones con nombre y predeterminadas

Puedes combinar exportaciones con nombre y predeterminadas en un solo módulo:

// utils.js
export const VERSION = '1.0.0';
export function helper() { /* ... */ }

export default class MainUtil { /* ... */ }

// main.js
import MainUtil, { VERSION, helper } from './utils.js';

console.log(VERSION);  // Output: 1.0.0
const util = new MainUtil();
helper();

Cambiar el nombre de las importaciones

Puedes cambiar el nombre de las importaciones para evitar conflictos de nombres:

// module.js
export const someFunction = () => { /* ... */ };

// main.js
import { someFunction as myFunction } from './module.js';

myFunction();

Importar todas las exportaciones como un objeto

Puedes importar todas las exportaciones de un módulo como un solo objeto:

// module.js
export const a = 1;
export const b = 2;
export function c() { /* ... */ }

// main.js
import * as myModule from './module.js';

console.log(myModule.a);  // Output: 1
console.log(myModule.b);  // Output: 2
myModule.c();

Importaciones dinámicas

Las importaciones dinámicas le permiten cargar módulos a pedido:

async function loadModule() {
  const module = await import('./dynamicModule.js');
  module.doSomething();
}

loadModule();

Ejemplos del mundo real

1. Componentes de reacción:

// Button.js
import React from 'react';

export default function Button({ text, onClick }) {
  return {text};
}

// App.js
import React from 'react';
import Button from './Button';

function App() {
  return  alert('Clicked!')} />;
}

1. Módulos de Node.js:

// database.js
import mongoose from 'mongoose';

export async function connect() {
  await mongoose.connect('mongodb://localhost:27017/myapp');
}

// server.js
import express from 'express';
import { connect } from './database.js';

const app = express();

connect().then(() => {
  app.listen(3000, () => console.log('Server running'));
});

Proyecto de demostración: Administrador de tareas

Creemos un administrador de tareas simple para demostrar las importaciones de ES6 en acción:

// task.js
export class Task {
  constructor(id, title, completed = false) {
    this.id = id;
    this.title = title;
    this.completed = completed;
  }

  toggle() {
    this.completed = !this.completed;
  }
}

// taskManager.js
import { Task } from './task.js';

export class TaskManager {
  constructor() {
    this.tasks = [];
  }

  addTask(title) {
    const id = this.tasks.length   1;
    const task = new Task(id, title);
    this.tasks.push(task);
    return task;
  }

  toggleTask(id) {
    const task = this.tasks.find(t => t.id === id);
    if (task) {
      task.toggle();
    }
  }

  getTasks() {
    return this.tasks;
  }
}

// app.js
import { TaskManager } from './taskManager.js';

const manager = new TaskManager();

manager.addTask('Learn ES6 imports');
manager.addTask('Build a demo project');

console.log(manager.getTasks());

manager.toggleTask(1);

console.log(manager.getTasks());

Para ejecutar esta demostración, necesitarás usar un entorno JavaScript que admita módulos ES6, como Node.js con el indicador --experimental-modules o un navegador moderno con un paquete como webpack o Rollup.

Mejores prácticas y consejos

1. Utilice exportaciones con nombre para múltiples funciones/valores y exportaciones predeterminadas para la funcionalidad principal.
2. Mantenga sus módulos enfocados y con un solo propósito.
3. Utilice convenciones de nomenclatura coherentes para sus archivos y exportaciones.
4. Evitar dependencias circulares entre módulos.
5. Considere la posibilidad de utilizar un paquete como webpack o Rollup para proyectos basados ​​en navegador.
6. Utilice importaciones dinámicas para dividir código y optimizar el rendimiento en aplicaciones grandes.

Conclusión

Las importaciones de ES6 proporcionan una forma potente y flexible de organizar el código JavaScript. Al comprender las diversas sintaxis de importación y exportación, puede crear aplicaciones más modulares, fáciles de mantener y eficientes. El proyecto de demostración y los ejemplos del mundo real que se proporcionan aquí deberían brindarle una base sólida para utilizar las importaciones de ES6 en sus propios proyectos.

Recuerda considerar siempre las necesidades específicas de tu proyecto al decidir cómo estructurar tus módulos e importaciones. ¡Feliz codificación!