javascript - ES6 导出的意外标记

Question

我正在尝试了解 ES6 导出的工作原理。

这里有两个本地文件:

main.html:

<script src="module.js"></script>
<script>
    import {hello} from './module'; // Tried both "module" and "module.js"
    let val = hello();
    alert(val);
</script>

module.js:

export function hello() {
    return 'Hello';
}

预期结果:带有“Hello”文本的警报。实际结果:错误:

module.js - line 1: Unexpected token export

main.html - line 3: Unexpected token {

如何让它发挥作用？

附言。在 Chrome 67 中测试。

Answer 1

Chrome 已添加对 JavaScript 模块的全面支持 since version 61 .这是您在文档中显然遗漏的重要部分:

Modules must be eventually included in your HTML with type="module", which can appear as an inline or external script tag.

您不必使用第一个脚本； import 将引导浏览器下载所需的模块。所以这应该足够了:

<script type="module">
    import {hello} from './module.js';
    let val = hello();
    alert(val);
</script>

但是，有一个警告:您将无法直接在 Chrome 中从文件系统提供模块 - 您需要设置“常规”HTTP 服务器或应用 this thread 中描述的解决方法.