ES6 Modules: Undefined onclick function after import

问题

I am testing ES6 Modules and want to let the user access some imported functions using onclick:

test.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Module Test</title>
</head>
<body>
    <input type="button" value="click me" onclick="hello();"/>
    <script type="module">import {hello} from "./test.js";</script>
</body>
</html>

test.js:

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

When I click the button, the developer console says: ReferenceError: hello is not defined. How can I import functions from modules so that they are available as onclick functions?

I am using Firefox 54.0 with dom.moduleScripts.enabled set to true.

回答1:

Module creates a scope to avoid name collisions.

Either expose your function to window object

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

window.hello = hello

Or use addEventListener to bind handler. Demo

<button type="button" id="hello">Click Me</button>
<script type="module">
  import {hello} from './test.js'

  document.querySelector('#hello').addEventListener('click', hello)
</script>

回答2:

Module scope in `ES6` modules:

When you import a script in the following manner using type="module":

<script type="module">import {hello} from "./test.js";</script>

You are creating a certain scope called module scope. Here is where modules scope is relative to other levels of scope. Starting from global they are:

Global scope: All declarations outside a module on the outermost level (i.e. not in a function, and for const and let not in a block) are accessible from everywhere in the Javascript runtime environment
Module scope: All declarations inside a module are scoped to the module. When other javascipt tries to access these declarations it will throw a reference error.
Function scope: All the variables declared inside (the top level of) a function body are function scoped
Block scope: let and const variables are block scoped

You were getting the referenceError because the hello() function was declared in the module, which was module scoped. As we saw earlier declarations inside module scope are only available within that module, and you tried to use it ouside the module.

We can make declarations inside a module global when we explicitly put it on the window object so we can use it outside of the module. For example:

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

来源：https://stackoverflow.com/questions/44590393/es6-modules-undefined-onclick-function-after-import

标签

javascript

ecmascript-6

es6-modules

ES6 Modules: Undefined onclick function after import

问题

回答1:

回答2:

Module scope in ES6 modules:

Module scope in `ES6` modules: