如何使用 type = module 的脚本代码

我不明白为什么这些琐碎的代码不起作用:

.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!");
}

当我连接 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'

我错过了什么？

99657 次浏览
小开
最佳答案
  1. 在模块上下文中，变量不会自动全局声明。你必须自己把它们连接到 window上。这是为了防止您在使用普通脚本标记时会遇到的范围模糊问题。
  2. 导入/导出用法不正确。

如果你是 export function xyz，你必须是 import { xyz }

如果你是 export default function xyz，你必须是 import xyz或者 import { default as xyz }

有关模块语法的更多信息，请参见本文。

ShowImport. js:

import { showMessage } from './show.js'


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

Show.js:

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

提交答案