Question

解决：修复我的服务器的MIME类型解决了这个问题。我忘记了我不久前自己搞砸了。特别感谢@Sidney，@estus和@Josh Lee帮助我。

一旦我在ES6模块的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);
}

矿：

活演示：

Answer 1

这里的错误信息是

无法加载模块脚本：服务器使用非JavaScript MIME类型＆＃34; text / html＆＃34;进行响应。对每个HTML规范的模块脚本强制执行严格的MIME类型检查。

这是对Web开发的一项新要求，到目前为止，这种要求大多可以避免使用不正确的MIME类型。

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

Python＆＃39;：python3 -m http.server（参见1）。
节点的http服务器：npm i -g http-server && http-server（请参阅2）。

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

隐藏过滤器隐藏的所有[...]项目

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

在devtools中按F1（或选择菜单＆gt;设置）。
滚动到底部，然后点击“恢复默认值并重新加载”。

Answer 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

ES6模块出现问题

2 个答案: