Javascript ES6模块在简单示例中不起作用。为什么？_Javascript_Html_Es6 Modules

Javascript ES6模块在简单示例中不起作用。为什么？

javascript html

Javascript ES6模块在简单示例中不起作用。为什么？,javascript,html,es6-modules,Javascript,Html,Es6 Modules,我在模块和香草JS方面遇到了一些问题。有人能给我解释一下为什么这个测试代码不能呈现吗？它应该呈现“消息”一词。我在live server上使用VSCode，所以应该是这样。我曾在Mac Os和Ubuntu、Chrome、Sadari和Firefox上尝试过，我得到了同样的结果我有一个index.html、一个main.mjs（在html主体上运行）和一个myMod.mjs（充当main.mjs的模块）文件 index.html <!DOCTYPE html> <html>

我在模块和香草JS方面遇到了一些问题。有人能给我解释一下为什么这个测试代码不能呈现吗？它应该呈现“消息”一词。我在live server上使用VSCode，所以应该是这样。我曾在Mac Os和Ubuntu、Chrome、Sadari和Firefox上尝试过，我得到了同样的结果

我有一个index.html、一个main.mjs（在html主体上运行）和一个myMod.mjs（充当main.mjs的模块）文件

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
</head>
<body>
    <h1 id="myH1"></h1>
    <script type="module" src='main.mjs'></script>
</body>
</html>

myMod.mjs

import x from './myMod.js';

const y = x;
document.getElementById('myH1').innerHTML = y;

export default x = "message";

VSCode中的代码：

重写此文件

main.mjs

import { x } from './myMod.mjs';

const y = x;
console.log( y );
document.getElementById('myH1').innerHTML = y;

myMod.mjs

export const x = 'message';

export default x=“message”导致未声明的变量异常。您应该在控制台中看到错误消息。正确的语法是导出默认的“message”，或const x=“message”；导出{x为默认值}
。谢谢@Bergi！你说对了一半。我照你的建议做了，但还是没用。然后，我将.mjs改为.js，它成功了（有人告诉我试试，因为.mjs只用于节点）。然后，为了检查，我解开了你建议的更改，它又停止工作了。因此，结论是：声明和更改扩展都是必要的。非常感谢，这帮了大忙！啊，对了，我错过了。浏览器不关心您使用的文件扩展名，但是如果url以myMod.mjs
结尾，您还必须import…from./myMod.mjs'。你应该在这方面犯一个很大的错误，尽管浏览器确实如此。但也许您的服务器拒绝提供.mjs
文件？或者至少，没有为他们提供正确的内容类型？没错，浏览器不在乎是.js还是.mjs。谢谢@HardCoreQual！你说对了一半。我照你的建议做了，但还是没用。然后，我将.mjs改为.js，它成功了（有人告诉我试试，因为.mjs只用于节点）。然后，为了检查，我解开了你建议的更改，它又停止工作了。因此，结论是：声明和更改扩展都是必要的。非常感谢，这帮了大忙！