Javascript 如何在Safari上提供ES6模块？

关于Safari中ES6模块的使用，我有一个问题。这让我抓狂，因为它阻止我与Safari用户共享我的网站

我的web应用程序和即将推出的MWE在以下环境中运行良好：

• Windows:Chrome、Edge和Firefox均通过Windows本地服务器（WAMP）和my web服务器
• 手机：Chrome、Firefox（Android和iOS）。即使是三星手机和Opera的Android操作系统也可以正常工作
• 马科斯：
  • 在Safari上，Chrome和Firefox通过Mac本地服务器（AMPPS）运行
  • 通过我的web服务器在Chrome和Firefox上

但是，我的web应用程序不能通过我的web服务器在MacOS Safari中运行（目前我正在Safari 13.0.4上尝试这段代码，但是所有提到的浏览器的现代版本在这个问题上的行为都是相同的）。同样，它在最新版本的iOS Safari中也不起作用

MWE

/test_class.js

导出类TestClass{
构造函数（）{
log（“创建了一个测试类”）；
}
}

//index.html

log（“启动主脚本”）；
//以下行似乎只在Safari中导致错误
从'./test_class.js'导入{TestClass}；
//其余部分由于错误而未执行
让test_class=新的TestClass；
console.log（“完成”）；

控制台输出

当我从服务器加载index.html时，Safari的控制台会显示错误

TypeError:“text/html”不是有效的JavaScript MIME类型

其他信息（不确定是否相关）

当我转到Safari的参考资料部分时，确实有一个test_class.js条目不包含上述代码，而是：

函数toNumbers（d）
// ...
函数toHex（）
// ...
变量a=单位数（“…”），
b=吨数（“…”），
c=吨数（“…”）；
document.cookie=“…”；
location.href=”http://www.my_super_website.com/test_class.js?i=1";

这仅在连接到服务器时发生。行

location.href=”http://www.my_super_website.com/test_class.js?i=1";有意义吗？我的理解是，目前Safari试图加载test_class.js，但存在一些问题

我到目前为止所做的尝试


如果我从'/test_class.js'中删除行
import{TestClass}，一切正常

如果我将
import
调用放在一个新的脚本文件中，然后在html文档中使用该脚本文件，则会出现相同的问题
我验证了我命名文件的方式./test_class.js是正确的，但由于这在大多数浏览器中都可以使用，我想这没问题
我使用的是一个免费的托管解决方案，infinityfree.net，所以可能有什么事情发生了
在web开发中，我们使用ES6和ES7进行开发，但并非所有浏览器都支持这些

为了在大多数浏览器中发布工作代码（Safari-Chrome-IE9）

浏览器也不重要。您应该使用像（webpack-gulp-grant）这样的构建过程，或者使用像（React、Angular和VUE）这样的现有库

示例：用于开始使用网页包

witch将允许您通过将所有代码转换为ES5获得完整的工作代码，并捆绑该代码以确保减少卡盘尺寸
我想我有一个解决方案：

将文件扩展名从
.js
更改为
.mjs
。您可能还需要更新服务器的mime类型/扩展关联。我使用的是<代码> ApACEE2——我需要进入<代码> /ETC/MIME。类型并修改行列表<代码> JS>代码>也包含<代码> MJS（现在它将被认为是<代码>应用程序/JavaScript < /C> >）

我做了最简单的测试——我需要在Safari上对我的网站进行更多的测试，以验证它现在在所有预期的浏览器中都同样有效。
你有机会看看流行的工具吗，如Babel、Webpack、Rollup、，或者将您的ES6代码打包并传输到每个浏览器都能使用/解析的东西？我没有，我是web开发新手，所以我没有这些方面的经验。因为包括Safari在内的所有现代浏览器都与ES6模块兼容，所以我仍然认为这是一种以有组织的方式编写代码的好方法。但是如果没有人知道如何解决这个问题，我会研究这些工具！谢谢：）嘿-在过去的6周里，这方面有什么进展吗？非常感谢！如果没有人知道这是什么问题，我会接受你的回答。