ES6模块.js后缀解析报错、.mjs后缀MIME类型异常解决方案求助

问题根源分析 #

1. ES模块默认有独立作用域，你导出的square方法不会自动挂载到全局window对象，非模块脚本直接调用必然触发未定义错误。另外你操作DOM的脚本位置在field1元素之前，DOM还未渲染就执行获取元素的逻辑也会导致异常。
2. 你代码里写的'sourceType: module'是ESLint等校验工具的配置标识，对浏览器没有任何效果，无法用来告知浏览器当前文件是ES模块。
3. 当服务器无法返回正确的JS MIME类型时，浏览器会拒绝将响应内容作为JS解析，不管你后缀是.js还是.mjs都会触发错误。

可落地解决方案（无需修改服务器配置） #

方案1：确认服务器.js返回MIME正常时使用（最简单）

如果你的嵌入式服务器对.js后缀返回的MIME类型为text/javascript，直接做以下修改即可：

• 调整moduleTest.js代码，删除无效标识，按需挂载全局方法：

'use strict';

export function square (x) {
    return x * x;
}
// 手动挂载到全局，供外部非模块脚本调用
window.square = square;

• 调整HTML代码顺序，保证DOM操作时元素已经渲染：

<!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>
<div class="textField" id="field1">xxx</div>   
<script type="text/javascript">
    // 模块加载是异步的，等页面所有资源加载完成再调用
    window.onload = () => {
        document.getElementById("field1").innerHTML = square(33);
    }
</script>
</body>
</html>

方案2：服务器.js返回MIME异常时使用（完全绕开服务器限制）

如果服务器对.js也返回错误的MIME类型，用Blob转译+动态导入的方案强制浏览器识别为模块：
直接替换整个HTML代码如下：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<script src="/ModuleTest/modScript.js" type="module"></script>
<title>Module Test</title>
</head>
<body>
<div class="textField" id="field1">xxx</div>
<script type="module">
// 手动请求JS文件，自行处理成正确MIME格式的模块
const res = await fetch('/ModuleTest/moduleTest.js');
const jsContent = await res.text();
const blob = new Blob([jsContent], { type: 'text/javascript' });
const module = await import(URL.createObjectURL(blob));
// 直接使用模块导出的方法
document.getElementById("field1").innerHTML = module.square(33);
</script>
</body>
</html>

该方案完全不依赖服务器返回的MIME类型，只要服务器能正常返回JS文件内容即可正常运行。

内容的提问来源于stack exchange，提问作者Andromeda