ES6 模块的问题

Joh*_*ith 7 javascript google-chrome module ecmascript-6

已解决:修复我的服务器的 MIME 类型解决了该问题。我忘了前段时间我自己惹了他们。特别感谢@Sidney@estus@Josh Lee帮助我。


一旦我发现一个ES6 模块的 MDN 上引用的实时演示仅适用于我当前版本的 Chrome,我想尝试使用模块进行试验。可悲的是,我无法获得任何与执行相关的模块,即使现场演示工作正常。我什至将这两个文件(index.htmlutils.js)复制到我服务器上的一个目录中,试图准确地重新创建实时演示,但即使是一行代码,它仍然无法运行。我错过了什么?有人可以给我一些关于何时执行模块脚本以及为什么我的不执行的提示吗?

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

[编辑:]是的,控制台设置为“全部隐藏”。两个站点都显示缺少 favicon.ico 的错误,所以它与我的问题无关。

[编辑:] MDN 引用的文章,包含现场演示。

[更新:]问题似乎出在我的本地服务器在获取模块时给出的不正确的 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>
Run Code Online (Sandbox Code Playgroud)

实用程序.js:

export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}
Run Code Online (Sandbox Code Playgroud)

矿: 矿

现场演示: 在此处输入图片说明

Jos*_*Lee 5

这里的错误信息是

\n\n
\n

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

\n
\n\n

这是 Web 开发的一个新要求,到目前为止,大多数情况下都可以轻松摆脱不正确的 MIME 类型。

\n\n

我知道用于本地开发的两个快速 Web 服务器具有合理的 MIME 处理功能,它们是:

\n\n
    \n
  1. Python 的:(python3 -m http.server参见1)。
  2. \n
  3. 节点的 http 服务器:(npm i -g http-server && http-server参见2)。
  4. \n
\n\n

在您的情况下,没有显示错误消息,由

\n\n
\n

隐藏所有 [\xe2\x80\xa6] 1 个被过滤器隐藏的项目

\n
\n\n

通过单击 \xe2\x80\x98Hide all\xe2\x80\x99 并选择 \xe2\x80\x98Default\xe2\x80\x99 来修复此问题(您可能希望将其设置为 \xe2\x80\x98All level\xe2\ x80\x99 工作时)。或者将开发工具重置为默认状态:

\n\n
    \n
  1. 在开发工具中按 F1(或选择菜单 > 设置)。
  2. \n
  3. 滚动到底部并单击\xe2\x80\x98恢复默认值并重新加载\xe2\x80\x99。
  4. \n
\n