tro*_*mgy 10 javascript import module ecmascript-6
我无法弄清楚为什么这个简单的代码不起作用:
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'
那我在这里错过了什么？
kin*_*aro 26
window你自己身上.这是为了防止在使用普通脚本标记时遇到的范围模糊问题.导入/导出使用不正确.
如果你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!")
}