Apache Cordova Hybrid App 中的 ES6 Modules/Imports 抛出 MIME 类型错误

Question

我正在尝试在使用 Apache Cordova 构建的混合移动应用程序中使用 ES6 模块。不幸的是，Cordova 似乎正在为没有 MIME 类型的模块提供服务，这会在 WebView 中引发错误（在 Chrome 63 和 64 beta 中）。

具体来说，部署的应用程序（使用 chrome remote debugger）抛出以下错误：

Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

我使用的是标准 ES6 导入，目标版本现在支持 chrome。

<!--index.html-->
<script type="module">
    import App from "./app.js"
    import config from "./config.js"
    window.app = new App(config)
</script>

当预构建资产通过网络服务器提供服务而不是通过 Cordova 部署时，一切正常。通过 Babel 进行转译可能是一种选择，但这似乎让人非常头疼，在我知道没有更好的选择之前，我宁愿不走那条路。

有什么建议吗？

Answer 1

文件系统获取的文件没有 MIME 类型，但由于加强了安全性，ES6 模块必须仅以 "application/javascript" MIME 类型提供。

作为解决方法，您可以（像我一样）在您的应用程序中包含一个网络服务器。例如，参见 cordova-httpd.

Answer 2

我最终通过使用 webpack 将我的所有代码和资产编译到一个文件中来解决这个问题。这允许使用导入语法，而不会在 Apache Cordova 中出现所有相关问题。它不如本机支持，但对我来说是最好的解决方案。

Answer 3

我通过删除 cordova 项目中所有出现的 type="module" 来解决它。

Answer 4

Apache Cordova 应用程序可能不需要使用 ES6。由于应用程序将使用 file_url 加载脚本，而它不理解 'type=module'。在从服务器加载脚本的 Web 应用程序中，'type=module' 不会成为问题。

与 ES5 相比，ES6 生成的脚本的大小更小，因此从服务器加载更小的文件是有意义的。但在 Cordova 应用程序中，文件是在内部访问的，因此使用 ES5 不会有太大区别。

Apache Cordova Hybrid App 中的 ES6 Modules/Imports 抛出 MIME 类型错误

ES6 Modules/Imports in Apache Cordova Hybrid App Throw MIME Type Error

javascript

google-chrome

cordova

hybrid-mobile-app

es6-modules