Es 6 模块在 Chrome 中加载但未运行答案

【问题标题】：Es 6 Module is loaded in Chrome but not runEs 6 模块在 Chrome 中加载但未运行
【发布时间】：2017-11-21 00:49:48
【问题描述】：

在 Chrome Canary 64 位版本 61.0.3134.0 中，我启用了本文https://medium.com/dev-channel/es6-modules-in-chrome-canary-m60-ba588dfb8ab7 中详述的实验性标志“Experimental Web Platform flag”。

这应该允许我在浏览器中使用 ES6 模块而无需构建步骤。我的设置很简单：我有 2 个文件：

我的 index.html：

<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<script type="module" src="app.js"></script>
</body>
</html>

还有我的 app.js：

console.log('hello');

我可以在 Chrome 开发工具的网络选项卡中看到 app.js 已加载，但控制台中没有任何反应。没有错误信息。但是，如果我从脚本标签中删除 type="module"，控制台中会显示消息“hello”。

【问题讨论】：

标签： javascript google-chrome ecmascript-6 es6-modules

【解决方案1】：

我正在从文件系统加载文件。

要使 ES 2015 加载工作，必须从网络服务器加载文件。一个简单的 Node Express 服务器就可以解决问题。

【讨论】：

【解决方案2】：

如果网络服务器没有为 javascript 文件报告正确的 MIME 类型，就会发生这种情况。

发生的情况是：浏览器请求文件，服务器检索并返回文件，但内容类型响应头不包含任何适用于 javascript 文件的有效 MIME 类型，因此浏览器拒绝处理文件任何进一步。这种行为是符合 ES6 规范的，我观察到 Chrome 的行为实际上是这样的。

存在许多适用于 javascript 文件的有效 MIME 类型，“application/javascript”就是其中之一，Web 服务器必须能够正确识别 javascript 文件，并在响应中返回该特定 MIME 类型。如果您决定对 javascript 模块使用“.mjs”文件扩展名而不是“.js”，这可能会有点棘手。

【讨论】：