[英]How to serve ES6 modules on Safari?
我有一个关于在 Safari 中使用 ES6 模块的问题。 这让我发疯，因为它阻止我与 Safari 用户共享我的网站。
我的网络应用程序和即将推出的 MWE 在以下环境中工作得很好：
但是，我的 Web 应用程序无法通过我的 Web 服务器在 MacOS Safari 中运行（目前我正在 Safari 13.0.4 上尝试此代码，但上述浏览器的所有现代版本对于此问题的行为方式相同）。 同样，它不适用于最新版本的 iOS Safari。
MWE
./test_class.js
export class TestClass {
constructor() {
console.log("Created a test class");
}
}
./index.html
<!DOCTYPE html>
<script type="module">
console.log("Starting the main script.");
// The following line seems to cause an error in Safari only
import { TestClass } from './test_class.js';
// The rest is not executed due to the error
let test_class = new TestClass;
console.log("Done.");
</script>
控制台输出
当我从我的服务器加载index.html时，Safari 的控制台给我错误
TypeError: 'text/html' 不是有效的 JavaScript MIME 类型。
附加信息（不确定是否相关）
当我转到 Safari 的资源部分时，确实有一个test_class.js条目不包含上面的代码，而是：
<html>
<body>
<script type="text/javascript" src="/aes.js" ></script>
<script>
function toNumbers(d)
// ...
function toHex()
// ...
var a = toNumbers("..."),
b = toNumbers("..."),
c = toNumbers("...");
document.cookie = "...";
location.href="http://www.my_super_website.com/test_class.js?i=1";
</script>
</body>
</html>
这仅在我连接到我的服务器时发生。 行location.href="http://www.my_super_website.com/test_class.js?i=1"; 说得通？ 我的理解是此时 Safari 尝试加载test_class.js但有一些问题。
到目前为止我试过的
import { TestClass } from './test_class.js'; ，一切正常。import调用放在一个新的脚本文件中，然后在 html 文档中使用该文件，则会出现同样的问题。在 web 开发中，我们使用 ES6 和 ES7 进行开发，但并非所有浏览器都支持这些。
为了在大多数浏览器中发布工作代码（Safari - Chrome - IE9）
和浏览器无关。 您应该使用像（ webpack - gulp - grant ）这样的构建过程或使用像（React、Angular 和 VUE ）这样的现有库
示例：开始使用webpack https://webpack.js.org/guides/getting-started/
女巫将通过将所有代码转换为 ES5 并捆绑该代码以确保减少卡盘大小，从而授予您完整的工作代码
我想我有一个解决方案：
将文件扩展名从.js更改为.mjs 。 您可能还需要更新服务器的 mime 类型/扩展关联。 我正在使用apache2 - 我需要将 go 放入/etc/mime.types并修改列出js的行，使其也包含mjs （因此它现在将其视为application/javascript 。）
我进行了最简单的测试——我需要在 Safari 上对我的网站进行更多测试，以验证它现在在所有预期的浏览器中都能正常工作。
由于只有 Safari 受到影响，服务器只是为“.js”文件提供了错误的 MIME 类型，这里似乎并非如此。 因此，我想补充一点，还有一种常见的其他情况，即人们收到有关错误 MIME 类型的消息，并且行为仅乍一看与浏览器无关：
服务器可能会给出“未找到”(404) 或“访问被拒绝”(403) 或类似的回复。 这些响应通常以“text/html”的形式给出，因此您会得到浏览器关于错误的 mime 类型的有点误导性的抱怨。 当网站需要 cookie 进行身份验证时，浏览器依赖性就会出现。 某些以前的 Safari 版本在从同一站点加载 es6 模块时不会自动发送身份验证 cookie，因此这些 Safari 版本会得到 403 应答。 我并不是说这里一定是这种情况，但可能是这种情况。 如果是这样，那么这个 SO answer about missing cookies中描述了一个解决方案。
如何让Safari在es6（systemJS）异步模块中显示错误？
[英]How to make Safari to show errors in es6 (systemJS) async modules?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.