JavaScript ES6 Module基础问题：.mjs文件扩展名和MIME类型

Question

我遇到了我希望是 ES6 模块的小问题：

如果我为 JavaScript 模块使用 .mjs 文件扩展名，Chrome 和 Firefox 等浏览器会很满意 - 但如果我使用 .js，则会出现错误消息。
但是，我需要使用的非常简单的服务器（它是一个专门的嵌入式服务器）提供带有 MIME 类型纯文本的 .mjs 文件，而不是 JavaScript .

这是一个简单的例子：

Default.html:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="/ModuleTest/modScript.js" type="module"></script>;
<script src="/ModuleTest/moduleTest.js" type="module"></script>;
<title>Module Test</title>
</head>
    
<body>
<script  type="text/JavaScript">
    document.getElementById("field1").innerHTML = square(33);
    
</script>
    
<div class="textField" id="field1">xxx</div>                                                     

</body>
</html>

和moduleTest.mjs：

// JavaScript Document
'use strict';
'sourceType: module';

export function square (x) {
    return x * x;
}

在这里，如果我使用 .js (moduleTest.js) 的文件扩展名，我会收到如下错误消息：

ERROR: Parsing error: 'import' and 'export' may only appear with 'sourceType: module'

我好像卡住了。只有当模块具有 .mjs 文件扩展名时，浏览器才会将它们视为模块......但是 .mjs 文件作为纯文本文件提供，我从服务器收到 MIME 错误。

这似乎是 Google 先生应该能够在几分钟内回答的那种基本问题 - 但是多次阅读我的 JavaScript 书籍，并且多次搜索都失败了得出一个解决方案。

让 .js 文件真正被解析为模块似乎是唯一的选择，因为我无法控制白痴服务器。我不明白为什么要指定

<script src="/ModuleTest/moduleTest.js" type="module"></script>;

行不通。

我得到的运行时错误是：

Uncaught ReferenceError: square is not defined
  at default.html: 12

我做错了什么？

Answer 1

所以，这里发生的是你的模块没有导出 square 到任何东西。只有当您将它们导入另一个脚本时，这样的导出才有效。

例如，如果您将脚本导入另一个模块（请记住，您不能在网页中导入本地模块），那么您可以使用它：

//File: /ModuleTest/modScript.js
'use strict';
'sourceType: module';

export function square (x) {
    return x * x;
}

//File: /ModuleTest/impScript.js
'use strict';
'sourceType: module';

import { square } from "./modScript";

console.log(square(2)); //4

现在，导入的变量（至少根据我的经验和我所有的失败）没有添加到 window。例如，如果我有这个：

<!doctype html>
<html>
  <head />
  <body>
    <script type="module">
      import { Octokit } from "https://cdn.skypack.dev/octokit";
      console.log("From import:", Octokit) // class extends this { ... }
    </script>
    <script type="text/javascript">
      console.log(Octokit) //Uncaught ReferenceError: Octokit is not defined
    </script>
    <script type="text/javascript">
      console.log("From window:", window.Octokit) //undefined
    </script>
  </body>
</html>

Octokit 变量仅在 type="module" 脚本中可用，并在其余脚本之后加载。

JavaScript ES6 Module基础问题：.mjs文件扩展名和MIME类型

JavaScript ES6 Module basic question: .mjs file extension and MIME type

javascript

es6-modules