如何在 Safari 上提供 ES6 模块? [英] How to serve ES6 modules on Safari?
问题描述
我有一个关于在 Safari 中使用 ES6 模块的问题.它让我发疯，因为它阻止我与 Safari 用户共享我的网站.
I have a question regarding the usage of ES6 modules within Safari. It's driving me crazy because it prevents me from sharing my website with Safari users.
我的 Web 应用程序和即将推出的 MWE 在以下环境中运行良好:
My web application and the coming up MWE work perfectly fine in the following environments:
- Windows:Chrome、Edge 和 Firefox，均通过 Windows 本地服务器 (WAMP) 和我的网络服务器；
- 移动:Chrome、Firefox(Android 和 iOS).甚至适用于 Android 的 Samsung Mobile 和 Opera 也能正常工作.
- MacOS:
- 在 Safari、Chrome 和 Firefox 上通过 Mac 本地服务器 (AMPPS)；
- 通过我的网络服务器在 Chrome 和 Firefox 上运行.
- Windows: Chrome, Edge and Firefox both via a Windows local server (WAMP) and via my web server;
- Mobile: Chrome, Firefox (both in Android and iOS). Even Samsung Mobile and Opera for Android work fine.
- MacOS:
- on Safari, Chrome and Firefox via a Mac local server (AMPPS);
- on Chrome and Firefox via my web server.
但是，我的网络应用程序无法通过我的网络服务器在 MacOS Safari 中运行(目前我正在 Safari 13.0.4 上尝试此代码，但上述浏览器的所有现代版本都可以正常运行关于这个问题的方法相同).同样，它在最新版本的 iOS Safari 中也不起作用.
However, my web application does not work within MacOS Safari via my web server (at the moment I'm trying this code on Safari 13.0.4, but all modern versions of the mentioned browsers behave the same way with respect to this problem). Similarly, it does not work within the latest version of 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 的控制台给我错误
When I load index.html from my server, Safari's console gives me the error
TypeError: 'text/html' 不是有效的 JavaScript MIME 类型.
TypeError: 'text/html' is not a valid JavaScript MIME type.
其他信息(不确定是否相关)
当我转到 Safari 的资源部分时，确实有一个 test_class.js 条目不包含上面的代码，而是:
When I go to the resource section of Safari, there is indeed an entry for test_class.js that does not contain the code above but instead:
<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 但有一些问题.This only occurs when I connect to my server. Does the line
location.href="http://www.my_super_website.com/test_class.js?i=1";make sense? My understanding is that at this point Safari tries to load test_class.js but has some issue with it.到目前为止我尝试过的
- 如果我从 './test_class.js'; 中删除
import { TestClass } 行，则一切正常. - 如果我将
import调用放在一个新的脚本文件中，然后在 html 文档中使用，则会出现同样的问题. - 我确认我命名文件 ./test_class.js 的方式是正确的，但由于这适用于大多数浏览器，我想这没问题.
- 我使用的是免费托管解决方案 infinityfree.net，所以可能有什么问题吗?
- If I remove the line
import { TestClass } from './test_class.js';, everything works fine. - The same problem occurs if I place the
importcall within a new script file that is then used in the html document. - I verified that my way of naming the file ./test_class.js is correct, but since this works in most browsers I guess it's fine.
- I'm using a free-hosting solution, infinityfree.net, so maybe there's something going on there?
推荐答案
在 Web 开发中，我们使用 ES6 和 ES7 进行开发，但并非所有浏览器都支持这些.
In web development we develop using ES6 and ES7 but those are not supported yet in all browsers.
为了在大多数浏览器中提供工作代码(Safari - Chrome - IE9)
In order to ship the working code in most browsers (Safari - Chrome - IE9 )
与浏览器无关.你应该使用像 ( webpack - gulp - grant ) 这样的构建过程或者使用像 ( React, Angular 和 VUE )
and does not matter the browser. You supposed to use a build process like ( webpack - gulp - grant ) or using existing libraries like ( React, Angular and VUE )
示例:开始使用 webpackhttps://webpack.js.org/guides/getting-started/
witch 将通过将您的所有代码转换为 ES5 并捆绑该代码以确保减少卡盘尺寸，从而授予您完整的工作代码
witch will grant you get a complete working code by converting all your code into ES5 and bundle that code to ensure reducing chuck sizes
这篇关于如何在 Safari 上提供 ES6 模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
