3

Buenas, pues mi pregunta es basica. Se pueden hacer imports locales en el navegador?

Todo lo que he leído de momento indican imports relativos o incluso externos a mi dominio que se llevan a traves de solicitudes HTTP

<body>
  <script type="module">
    import Logger from './js/Logger.js';

    const logger = new Logger();

    logger.info('importado desde ./js/Logger.js');
  </script>
</body>

O incluso imports externos a otros dominios:

<body>
  <script type="module">
    import { foo } from 'https://jakearchibald.com/utils/bar.js';

    console.log(foo);
  </script>
</body>

Pero aún no he visto ejemplos de imports locales (a lo mejor no es un estandar), pero no se deberia cubrir el caso que no necesites hacer peticiones HTTP sino querer importar un modulo declarado en un <script type="module"><script> y a lo mejor referenciarlo por ID 🤔🤔🤔 ?

algo como:

<body>
  <script id="localLogger" type="module">
    export default class Logger {
      info(value) {
        console.info(value);
      }
    }
  </script>
  <script type="module">
    import Logger from '#localLogger';

    const logger = new Logger();

    logger.info('importado localmente');
  </script>
</body>
1

1 respuesta 1

3
+50

No, no se puede. La especificación EMACScript no abunda en detalles, posiblemente por dejar abierta la opción que tú dices. Las posibilidades son:

import ImportClause FromClause;

Donde FromClause es:

FromClause: from ModuleSpecifier

o

import ModuleSpecifier;

Donde:

ModuleSpecifier: StringLiteral

Por tanto parece dejar abierta la opción de cómo definir un módulo unívocamente.

Pero si nos vamos a la documentación oficial de Mozilla, ellos lo interpretan como estas posibles opciones:

import defaultExport from "module-name";
import * as name from "module-name";
import { export } from "module-name";
import { export as alias } from "module-name";
import { export1 , export2 } from "module-name";
import { export1 , export2 as alias2 , [...] } from "module-name";
import defaultExport, { export [ , [...] ] } from "module-name";
import defaultExport, * as name from "module-name";
import "module-name";

donde "module name" es

El módulo desde el que importar. Normalmente es una ruta relativa o absoluta al archivo .js que contiene el módulo, excluyendo la extensión .js. Algunos empaquetadores pueden permitir o requerir el uso de la extensión; comprueba tu entorno. Sólo se permiten Strings con comillas simples o dobles.

No encuentro información oficial para otros navegadores, Google directamente enlaza a la web de Mozilla, aceptando que su interpretación es la correcta.

4
  • Esto pierde modularidad en si, ya que el scope de <script type="module"></script> es undefined y creas acoplamiento a un scope compartido (window). En el navegador hay diferentes tipos de esquemas como el de SVG que te permite hacer referencias elementos SVG dentro del documento HTML que permite prevenir esta misma razon de hacer solicitudes HTTP que pueden retrazar el renderizado de una pagina web Commented el 7 feb. 2018 a las 18:19
  • Respecto a lo de añadir javascript a el codigo HTML, Hay muchas formas de incluir codigo javascript en HTML, tanto en buildtime como en runtime que son mas para optimizaciones de performance y renderizado optimizado de una aplicacion, Mi pregunta viene a el hecho de omitir hacer solicitudes HTTP que puedan bloquear el renderizado inicial Commented el 7 feb. 2018 a las 18:29
  • He editado la respuesta para adecuarla (en mi opinión) a lo que estás pidiendo: algo más formal, menos basado en opiniones y con referencias. Si alguien puede ofrecer algún dato más, no tengo problema en hacer la respuesta wiki para que cualquiera pueda editarla y mejorarla Commented el 26 feb. 2018 a las 15:18
  • Gracias, mucho mas razonable !!!! :D Commented el 5 mar. 2018 a las 20:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.