JavaScript ES6 模块基本问题：.mjs 文件扩展名和 MIME 类型
[英]JavaScript ES6 Module basic question: .mjs file extension and MIME type
问题描述
I'm experiencing what I hope is a trivial issue with ES6 modules:
我遇到了我希望 ES6 模块的一个小问题：
If I use a .mjs file extension for a JavaScript module, browsers such as Chrome and Firefox are happy - but if I use .js, I get error messages.
如果我为 JavaScript 模块使用 .mjs 文件扩展名，Chrome 和 Firefox 等浏览器会很高兴 - 但如果我使用 .js，我会收到错误消息。BUT, the very simpleminded server that I need to use (it's a specialized embedded server), serves up .mjs files with a MIME type of plain text, rather than as JavaScript.
但是，我需要使用的非常简单的服务器（它是一个专门的嵌入式服务器），提供具有 MIME 类型纯文本的 .mjs 文件，而不是作为 JavaScript。
Here's a simple example:这是一个简单的例子：
Default.html:默认.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>
And moduleTest.mjs:和 moduleTest.mjs：
// JavaScript Document
'use strict';
'sourceType: module';
export function square (x) {
return x * x;
}
Here, if I use a file extension of .js (moduleTest.js), I get error messages like:在这里，如果我使用 .js (moduleTest.js) 的文件扩展名，我会收到如下错误消息：
ERROR: Parsing error: 'import' and 'export' may only appear with 'sourceType: module'
I seem to be stuck.我好像被卡住了。 The modules are only treated as modules by the browser if they have an .mjs file extension ... BUT .mjs files are served up as plain text files, and I get MIME errors from the server.如果模块具有 .mjs 文件扩展名，则浏览器仅将这些模块视为模块......但是 .mjs 文件作为纯文本文件提供，并且我从服务器收到 MIME 错误。
This seems like the kind of basic question that Mr. Google should be able to answer in a few minutes - but multiple readings of my JavaScript books, and a multitude of searches have failed to yield a solution.这似乎是 Google 先生应该能够在几分钟内回答的那种基本问题——但是我多次阅读 JavaScript 书籍，并进行了大量搜索，都未能找到解决方案。
Getting .js files to actually be parsed as modules seems to be the only option, since I have no control over the idiot server.将 .js 文件实际解析为模块似乎是唯一的选择，因为我无法控制白痴服务器。 I don't understand why specifying我不明白为什么要指定
<script src="/ModuleTest/moduleTest.js" type="module"></script>;
doesn't do the trick.没有用。
The runtime error I get is:我得到的运行时错误是：
Uncaught ReferenceError: square is not defined
at default.html: 12
What am I doing wrong?我究竟做错了什么？
1 个解决方案
解决方案1
1 已采纳 2021-07-16 19:54:27
So, what is happening here is that your module is not exporting square to anything.所以，这里发生的事情是你的模块没有将square导出到任何东西。 Exports like that only work when you import them into another script.像这样的导出只有在您将它们导入另一个脚本时才有效。
For example, if you import the script into another module (keep in mind that you cannot import local modules in a web page) then you can use it:例如，如果您将脚本导入另一个模块（请记住，您不能在网页中导入本地模块），那么您可以使用它：
//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
Now, imported variables are (at least in my experience and all of my failures to do this) are not added to the window.现在，导入的变量（至少根据我的经验和我所有的失败）都没有添加到窗口中。 For example, if I had this:例如，如果我有这个：
<!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>
The Octokit variable is only avaliable in the type="module" script, and it is loaded after the rest of the scripts. Octokit 变量仅在type="module"脚本中可用，并且在其余脚本之后加载。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.