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 - 第1行：意外的令牌export

main.html - 第3行：意外的令牌{

如何使它工作？

PS。 在Chrome 67中测试过。

Answer 1

自版本61以来 ，Chrome已添加对JavaScript模块的完全支持。 这是你在文档中显然遗漏的重要部分：

模块最终必须包含在HTML中，其类型为“模块” ，它可以显示为内联或外部脚本标记。

您不必使用第一个脚本; import将直接浏览器下载所需的模块。 所以这应该足够了：

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

但是有一点需要注意：您将无法直接在Chrome中从文件系统提供模块 - 您需要设置“常规”HTTP服务器或应用此线程中描述的变通方法。