OGeek|极客世界-中国程序员成长平台

标题: ios - 如何使用 ES6/ES2015 与 Apache Cordova 进行实时重新加载？ [打印本页]

作者: 菜鸟教程小白 时间: 2022-12-13 11:56
标题: ios - 如何使用 ES6/ES2015 与 Apache Cordova 进行实时重新加载？

我一直在一个项目中使用 ES6/ES2015，通过 Babel(ify) 转译为 ES5，并通过 budo 与 Browserify 捆绑。这提供了一个很好的工作流程，其中检测到对 ES6 文件的更改、转译和增量捆绑在内存中完成，无需任何文件 I/O，并通知浏览器刷新。

我是 Cordova 的新手，我正在尝试使用类似的工作流程，将浏览器替换为原生 iOS/Android 应用内浏览器，并在更改时重新加载。

我已将我的 config.xml 设置为使用“http://192.168.1.8:9966/index.html”的内容元素，这是我运行 budo 的笔记本电脑的 IP。

我认为某处需要“cordova prepare”，但我不确定如何集成它，或者 budo 是否需要有 cordova.js 的副本或其他东西。我很模糊...

正在使用的插件:

com.telerik.plugins.wkwebview 0.6.5 "WKWebView Polyfill"
cordova-plugin-battery-status 1.1.0 "Battery"
cordova-plugin-camera 1.2.0 "Camera"
cordova-plugin-console 1.0.1 "Console"
cordova-plugin-dialogs 1.1.1 "Notification"
cordova-plugin-file 3.0.0 "File"
cordova-plugin-file-transfer 1.3.0 "File Transfer"
cordova-plugin-geolocation 1.0.1 "Geolocation"
cordova-plugin-globalization 1.0.1 "Globalization"
cordova-plugin-inappbrowser 1.0.1 "InAppBrowser"
cordova-plugin-network-information 1.0.1 "Network Information"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-webserver 1.0.3 "CordovaWebServer"
cordova-plugin-whitelist 1.0.0 "Whitelist"

iOS 模拟器日志(调试 > 系统日志)中没有错误。

有人为 ES6 和 Cordova 工作过实时重载吗？谢谢!

Best Answer-推荐答案

好的，我想通了。似乎没有人走这条路，但它非常棒。

通过 Budo、Babel 和 Browserify 使用 Cordova 实时重新加载

假设

您的开发机器的 IP 为 192.168.1.8

您应用的入口点或主文件是 src/main.js

您的 Cordova 应用的根目录是 app

武道

运行 budo . Budo 还将注入(inject)一个与 LiveReload 服务器对话的脚本标签。您所有转译和捆绑的 ES5 代码都将来自路径“js/bundle.js”。

budo src/main.js:js/bundle.js \ --dir=app/www \ --live="app/www/**/*" \ -t babelify | garnish

配置.xml

开发版

更新您的 Cordova 应用程序的 config.xml，设置 content 元素的 src 属性以从您的 budo 实例而不是本地加载应用程序内容(例如 index.html)文件系统。

<content src="http://192.168.1.8:9966/index.html" />

生产版

<content src="index.html" />

这会照常从文件系统加载配置。

索引.html

将您的 app/www/index.html 文件分成 2 个版本:开发和生产。使用 shell 脚本或类似脚本在它们之间切换。

两个版本的 index.html 都通过脚本标签引用 js/bundle.js。

发展指数.html

index.html的开发版也需要加载cordova.js和cordova_plugins.js。

就我而言，我使用的是 iOS9 和 Telerik plugin that enables WKWebView .这个插件提供带有内部 httpd 的 Assets 来解决 iOS 错误，可以在 http://localhost:1234 找到。因此，我只需从那里加载 cordova.js 和 cordova_plugins.js。

<script type="text/javascript" src="http://localhost:12344/cordova.js"></script> <script type="text/javascript" src="http://localhost:12344/cordova_plugins.js"></script>

因此，您的开发 index.html 应该有一个内容安全策略，允许加载所有这些内容。

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' http://localhost:12344 http://192.168.1.8:*; connect-src 'self' ws://192.168.1.8:*" />

在其他情况下(例如 Android)，您可能不得不摆弄符号链接(symbolic link)和 Hook 。

生产索引.html

您只需要加载js/bundle.js，不需要引用192.168.1.8的内容安全策略条目。

实时重新加载/进行更改

当你编辑一个由 src/main.js 直接引用的 ES2015 文件时，Budo 会注意到更改、转译、捆绑，然后通过创建 LiveReload 的 WebSockets 连接通知客户端注入(inject)脚本。

对 app/www/css/index.css 进行更改(或使用 SASS/LESS 等并将其写入 index.css)。 Budo 会注意到并发送更改以在不重新加载页面的情况下实现。

对 app/www/index.html 进行更改，Budo 会注意到并通过其 LiveReload 服务器发送这些更改。

注意事项

deviceready 只会像您预期的那样触发一次，而不是在对 ES2015 文件的每次更改时触发。

添加/删除插件或更改 config.xml 将通过重新构建实现:cordova run ios。

如果您在构建后定期看到文件被缓存，请清理项目并重新构建:cordova clean ios。

Telerik 的 WKWebView 插件

如果您使用 Telerik WKWebView 插件，请使用来自 github 的最新版本，而不是 NPM。

cordova plugin add https://github.com/Telerik-Verified-Plugins/WKWebView

当前插件代码中存在错误处理基于 http 的 content(起始页)的加载。我有一个 pull request为此待定(2015 年 10 月 27 日)。

关于ios - 如何使用 ES6/ES2015 与 Apache Cordova 进行实时重新加载？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33337602/

欢迎光临 OGeek|极客世界-中国程序员成长平台 (http://jike.in/) Powered by Discuz! X3.4