Estoy usando "clases" con un montón de miembros estáticos para mantener mi código muy profesional organizado. Al igual que:
índice.html
<script type="module" src="client/js/main.js"></script>principal.js
import { UINav, UIDimension } from "./interface.js"; import { Dimension } from "./dimension.js"; import { InputFlex } from "./input.js"; function main() { Dimension.init(); UIDimension.init(); UINav.init(); InputFlex.start(); } Mi pregunta: ¿Por qué obtengo, por ejemplo, Uncaught ReferenceError: InputFlex is not defined cuando quiero verificar cosas desde dentro de la consola del navegador, pero todos los métodos de las importaciones se ejecutan como se esperaba? ¿Cómo puedo encontrar mis queridas "clases" desde dentro del navegador?
También estoy usando TypeScript, pero dudo que eso importe.
Editar: los archivos se obtienen de un servidor localhost.
Editar: parece haber un problema general en mi entorno en el que ni siquiera puedo encontrar la función main() desde dentro de la consola del navegador. Estoy ejecutando un servidor deno. ¿Podría ser esta la raíz de mi divertido problema?
Puedo registrar cosas desde el interior de los archivos js pero no desde la consola del navegador donde me dicen que todo está indefinido, pero evidentemente esas entidades existen en alguna parte, porque todo funciona según lo previsto.
Editar: @iamimran input.js es literalmente solo esto:
export class InputFlex { static myMember123 = {...}; static start() {...} (...) }Los módulos tienen su propio alcance. Las variables declaradas dentro de ellos no son globales.
Esto es bueno: las variables globales generan conflictos y dificultan el mantenimiento y la depuración.
Si desea acceder a ellos desde la consola de herramientas del desarrollador, deberá mover la consola al alcance del módulo, por ejemplo, estableciendo un punto de interrupción allí.
Sus mensajes de import muestran que está trabajando con módulos ECMAScript .
Una de las principales motivaciones detrás del uso de módulos es no contaminar el espacio de nombres global, lo que significa que cualquier variable definida en sus módulos es privada para ese módulo, no global. Esto se llama encapsulación .
Si desea que algo en un módulo se convierta en una variable global, debe "publicarlo" explícitamente en el objeto global:
import { UINav, UIDimension } from "./interface.js"; import { Dimension } from "./dimension.js"; import { InputFlex } from "./input.js"; // to "publish": Object.assign(globalThis, { UINav, UIDimension, Dimension, InputFlex }); // ... Tenga en cuenta que esto es potencialmente peligroso porque la llamada anterior a Object.assign sobrescribiría efectivamente cualquier variable global potencialmente ya existente (una de las muchas razones por las que desea usar el espacio de nombres global lo menos posible, preferiblemente nada ).
Si su única intención es "probar" cosas en la consola, está bien temporalmente (!). Si lo está haciendo con fines de depuración, es mejor usar directamente el depurador de herramientas de desarrollo de su navegador.