Question

我无法弄清楚为什么这个简单的代码无效：

的index.html：

<!doctype HTML>
<html>

<head>
    <script type="module" src="/showImport.js"></script>
</head>

<body>
    <button onclick="showImportedMessage();">Show Message</button>
</body>

</html>

showImport.js：

import showMessage from '/show.js';

function showImportedMessage() {
    showMessage();
}

show.js：

export default "Why do I need this?";

export function showMessage() {
    alert("Hello!");
}

由NPM http-server 提供服务。当我连接Chrome（v65）时，我看到以下错误

(index):8 Uncaught ReferenceError: showImportedMessage is not defined
    at HTMLButtonElement.onclick ((index):8)
onclick @ (index):8

如果我摆脱type=module（并通过将showMessage函数放在showImport.js中进行导入/导出）一切正常，但这个的全部目的是使用模块

此外，我不得不添加无用的export default声明，如果没有，Chrome会抱怨：

Uncaught SyntaxError: The requested module '/show.js' does not provide an export named 'default'

那我在这里错过了什么？

Answer 1

在模块上下文中，变量不会自动全局声明。您必须自己将它们附加到window。这是为了防止在使用普通脚本标记时遇到的范围模糊问题。
导入/导出使用不正确。

如果您export function xyz，则必须import { xyz }

如果您export default function xyz，则必须import xyz或import { default as xyz }

See this article for more information on the module syntax.

考虑到这一点，这就是你最终的目标。

showImport.js：

import { showMessage } from '/show.js'

window.showImportedMessage = function showImportedMessage() {
    showMessage()
}

show.js：

export function showMessage() {
    alert("Hello!")
}

如何使用type = module

1 个答案: