ES6 导出时出现意外令牌答案

【问题标题】：Unexpected tokens on ES6 exportES6 导出时出现意外令牌
【发布时间】：2018-11-24 09:21:30
【问题描述】：

我正在尝试了解 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 行：意外的令牌 {

如何让它发挥作用？

附言。在 Chrome 67 中测试。

【问题讨论】：

我猜这个错误是由于缺乏浏览器支持造成的：/
所有浏览器（和版本）都不支持。它应该在可以使用之前被转译；与，例如：babel
你应该使用像 babel 这样的编译器
将type="module" 添加到您的<script> 标签中
@JonasW。在 Chrome 67 中测试。我倾向于认为 ES6 导出在 Chrome 中有效，但我不确定。

标签： javascript ecmascript-6 es6-modules

【解决方案1】：

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

模块最终必须通过 type="module" 包含在您的 HTML 中，它可以显示为内联或外部脚本标记。

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

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

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

【讨论】：