ES6 模块的问题答案

【问题标题】：Trouble with ES6 ModulesES6 模块的问题
【发布时间】：2018-02-18 16:08:40
【问题描述】：

已解决：修复我的服务器的 MIME 类型解决了该问题。我忘记了我前段时间自己弄乱了它们。特别感谢 @Sidney、@estus 和 @Josh Lee 帮助我。

一旦我在 ES6 Modules 的 MDN 上找到了一个 working live-demo 引用，它只适用于我当前版本的 Chrome，我想尝试使用模块。可悲的是，我无法获得与执行相关的任何模块，即使现场演示工作得很好。我什至将这两个文件（index.html、utils.js）复制到了我服务器上的一个目录中，试图准确地重新创建现场演示，但它仍然不会运行任何一行代码。我错过了什么？有人可以给我一些关于模块脚本何时执行以及为什么我的不执行的提示吗？

tl;dr：我找到了一个 ES6 模块的工作示例，但尝试在我自己的本地服务器上重新创建它不起作用。

[编辑：] 是的，控制台设置为“全部隐藏”。不过，这两个网站都显示缺少 favicon.ico 的错误，因此与我的问题无关。

[编辑：] MDN 引用的article，包含现场演示。

[更新：] 问题似乎在于我的本地服务器在获取模块时给出的 MIME 类型不正确。

index.html/test.htm:

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<script type="module">
  import {addTextToBody} from './utils.js';

  addTextToBody('Modules are pretty cool.');
</script>

utils.js：

export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

我的：

现场演示：

【问题讨论】：

我预计控制台中至少会出现一个错误......在盯着这个看了一会儿之后，我意识到你已经隐藏了所有控制台消息。在控制台中，单击“全部隐藏”并选择“默认”。现在怎么说？
请提供一种复制问题的方法。见stackoverflow.com/help/mcve。对于一个简单的设置，一个 plunk 就可以了。
你会发现它们不再工作了 - 我可能不会这就是为什么需要一种复制它的方法。由于客户端应该工作，因此问题未涵盖服务器端。检查网络选项卡，看看那里发生了什么。由于目前您是唯一可以调试它的人，因此我不知道社区可以在这里提供什么帮助。
您甚至没有指定是否加载了 util.js。它可能有错误的 MIME 类型，会阻止它执行。它应该按预期工作，并且不应该尝试确认它是否有效。提供一种重新创建它的方法是询问者的责任。如果您希望其他人检查它，请提供一种完全复制它的方法。如果问题涉及 Web 服务器，请创建一个用于设置 Node Web 服务器的存储库。
是的，这就是我的观点。这是不会导致控制台出错的可能场景之一。

标签： javascript google-chrome module ecmascript-6

【解决方案1】：

这里的错误信息是

加载模块脚本失败：服务器以“text/html”的非 JavaScript MIME 类型响应。根据 HTML 规范对模块脚本强制执行严格的 MIME 类型检查。

这是 Web 开发的新要求，到目前为止，大多数情况下都可以轻松解决错误的 MIME 类型。

两个用于本地开发的快速 Web 服务器，我知道它们具有合理的 MIME 处理能力：

Python 的：python3 -m http.server（参见1）。
节点的 http-server：npm i -g http-server && http-server（参见2）。

在您的情况下，错误消息未显示，由

表示

隐藏所有 […] 1 个被过滤器隐藏的项目

通过单击“全部隐藏”并选择“默认”来解决此问题（您可能希望在工作时将其设置为“所有级别”）。或者将 devtools 重置为默认状态：

在开发工具中按 F1（或选择菜单 > 设置）。
滚动到底部并点击“恢复默认值并重新加载”。

【讨论】：

是的，我修复了 MIME 问题，这是由于几个月/几年前我弄乱了 httpd.conf 造成的。现在一切正常。感谢您的回答。

【解决方案2】：

我用这个yaml解决了这个问题。

runtime: python38
service: yourservice

handlers:
  - url: /(.*\.(gif|png|jpg|less|json|woff|woff2|ttf|eot|scss|css|js|ico|svg)(|\.map))$
    static_files: dist/\1
    upload: dist/(.*)(|\.map)
  - url: /(.*)
    static_files: dist/index.html
    upload: dist/index.html

【讨论】：

谢谢，这对我帮助很大！