Módulos ES6: función indefinida onclick después de la importación

Estoy probando los módulos ES6 y quiero permitir que el usuario acceda a algunas funciones importadas usando onclick :

test.html:

     Module Test    import {hello} from "./test.js";   

test.js:

 export function hello() {console.log("hello");} 

Cuando hago clic en el botón, la consola del desarrollador dice: ReferenceError: hello no está definido . ¿Cómo puedo importar funciones desde módulos para que estén disponibles como funciones onclick?

Estoy usando Firefox 54.0 con dom.moduleScripts.enabled configurado en true .

El módulo crea un ámbito para evitar colisiones de nombres.

O bien exponga su función al objeto window

 import {hello} from './test.js' window.hello = hello 

O use addEventListener para enlazar el controlador. Manifestación

   

Alcance del módulo en los módulos ES6 :

Cuando importa un script de la siguiente manera usando type="module" :

  

Estás creando un cierto scope llamado módulo scope. Aquí es donde el scope de los módulos es relativo a otros niveles de scope. A partir de lo global son:

  1. Alcance global: todas las declaraciones fuera de un módulo en el nivel más externo (es decir, no en una función, y para const y no en un bloque) son accesibles desde cualquier lugar en el entorno de ejecución de Javascript
  2. Ámbito del módulo: todas las declaraciones dentro de un módulo están sujetas al ámbito del módulo. Cuando otro javascipt intente acceder a estas declaraciones, emitirá un error de referencia.
  3. Ámbito de la función: todas las variables declaradas en el interior (el nivel superior de) el cuerpo de una función tienen un ámbito de función
  4. Ámbito de bloque: las variables let y const son ámbito de bloque

Recibió el error de referencia porque la función hello() se declaró en el módulo, que estaba dentro del scope del módulo . Como vimos, las declaraciones anteriores dentro del scope del módulo solo están disponibles dentro de ese módulo, y usted trató de usarlo fuera del módulo.

Podemos hacer declaraciones dentro de un módulo global cuando lo colocamos explícitamente en el objeto de la ventana para que podamos usarlo fuera del módulo. Por ejemplo:

 window.hello = hello; // putting the hello function as a property on the window object