JavaScript
import y export
Explica exports nombrados y por defecto, imports estáticos, alias y reexportaciones para definir contratos claros entre módulos JavaScript.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
- Fundamentos de programación
JavaScript
Explica exports nombrados y por defecto, imports estáticos, alias y reexportaciones para definir contratos claros entre módulos JavaScript.
export const taxRate = 0.19;
export function calculateTax(price) {
return price * taxRate;
}Importar:
import {
taxRate,
calculateTax,
} from "./taxes.js";Los nombres deben coincidir salvo que utilices alias.
const taxRate = 0.19;
function calculateTax(price) {}
export {
taxRate,
calculateTax,
};No crea copias nuevas; exporta bindings existentes.
export {
calculateTotal as total,
};import {
total as calculateOrderTotal,
} from "./prices.js";El alias local puede adaptarse al contexto sin cambiar la API original.
export default function createClient() {}import createApiClient from "./client.js";El importador elige el nombre local.
Un módulo solo puede tener una exportación default, pero puede combinarla con named exports.
Named exports:
Default puede ser útil cuando el módulo representa una sola entidad principal.
No existe una regla universal. Mantén una convención coherente.
import * as prices from "./prices.js";
prices.calculateTotal(items);El namespace es un objeto especial de módulo, no un objeto mutable ordinario.
prices.calculateTotal = anotherFunction;
// No es una forma válida de reemplazar la exportación.export {
calculateTotal,
} from "./prices.js";Permite construir una API pública sin importar primero a un binding local.
export * from "./prices.js";No reexporta default. Colisiones ambiguas entre nombres pueden impedir que un nombre se exponga.
export * as prices from "./prices.js";El consumidor recibe una agrupación explícita.
import "./setup.js";No crea bindings. Evalúa el módulo y sus dependencias.
if (condition) {
import { feature } from "./feature.js";
}No es válido. Las declaraciones estáticas de import aparecen en el nivel superior para que el grafo pueda analizarse antes de ejecutar.
Para carga condicional utiliza import().
import { count } from "./counter.js";El importador no puede reasignar count.
count = 10;
// TypeError o error de asignación.Pero puede observar actualizaciones realizadas por el módulo exportador.
import data from "./data.json" with {
type: "json",
};Los atributos comunican cómo debe cargarse el recurso. El soporte y tipos permitidos dependen del host.
export default createClient();Exporta el resultado calculado durante evaluación. Puede introducir trabajo o efectos tempranos; considera exportar una factory si la creación necesita control.
Menos controlado:
export * from "./internal-a.js";
export * from "./internal-b.js";Puede filtrar helpers internos accidentalmente.
Más explícito:
export {
createOrder,
cancelOrder,
} from "./orders.js";¿Por qué export * no vuelve a exportar el default?
Porque la operación export all se aplica a las exportaciones con nombre y excluye la exportación especial default.
Live bindings, evaluación y ciclos explica cómo se enlazan los módulos antes de ejecutar.