javascript - tutorial - angularjs vs bootstrap diferencias

Módulos ES6: las constantes importadas no están definidas al principio; estarán disponibles más tarde

Question

Yo uso los módulos ES6 en mi aplicación JavaScript. Las fuentes están compiladas con webpack y babel. Esta es una versión abreviada del archivo que me causa problemas:

export const JUST_FORM = 0;
export const AS_PAGE = 1;
console.log(AS_PAGE); // **
export default function doSomething(mode = AS_PAGE) {
console.log(mode);
console.log(JUST_FORM);
}

Utilizo esta funcionalidad tal como cabría esperar.

import doSomething, { AS_PAGE } from ''./doSomething''
console.log(AS_PAGE);
doSomething();

Cuando ejecuto la aplicación, se imprime tres veces undefined y solo una vez el valor esperado AS_PAGE que es el console.log marcado con ** . Sin embargo, esto se imprime al final! Muestra que:

• La constante AS_PAGE , cuando se usa como parámetro por defecto para la función doSomething , no se define en el momento de definir la función.
• La constante JUST_FORM no se define cuando se llama JUST_FORM .
• La constante AS_PAGE no se define cuando se importa explícitamente.

Aparentemente, lo que está sucediendo aquí es que solo la exportación default se analiza y evalúa y el resto del archivo se ignora hasta más tarde. Importe este archivo en varios lugares diferentes de mi aplicación (que es bastante grande en este momento) y en algún momento esos valores estarán realmente disponibles. A juzgar por la salida de la consola, es cuestión de tiempo, pero es posible que tenga una razón diferente. Obviamente, hago la importación exactamente de la misma manera en todos los lugares.

De todos modos, he escrito toda mi aplicación con el supuesto de que una vez que importe algo, está disponible de inmediato y puedo usarlo en mi código. Leí (brevemente) cómo deberían funcionar los módulos de ES6 y no he encontrado nada que demuestre que esta suposición es incorrecta. Y ha estado funcionando hasta ahora.

También tenga en cuenta que el comportamiento es el mismo cuando lo ejecuto con webpack-dev-server o lo compilo en un solo paquete.

¿Es este comportamiento realmente correcto? ¿Qué podría ser responsable de ello?

Answer 1

Como se sugiere en los comentarios, la respuesta aquí son dependencias circulares .

En realidad, no hay una dependencia circular presente en el código provisto en la pregunta (porque es solo un fragmento de código simplificado) pero los síntomas son muy claros.

El ejemplo más simple de una dependencia circular es cuando el archivo A importa el archivo B y el archivo B importa A. Desafortunadamente, lo que hace que este problema sea difícil de detectar a veces es que el círculo puede ser arbitrariamente grande, abarcando una gran cantidad de archivos.

Las dependencias circulares son compatibles con ES6 y pueden usarse cuando uno es lo suficientemente cuidadoso. Sin embargo, mi conclusión aquí es que las dependencias circulares son a menudo un signo de malas decisiones de diseño. Que era exactamente mi caso.