如何使用 ES6/ES2015 通过 Apache Cordova 实时重新加载？

Question

我一直在将 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或其他东西的副本。我对...

• https://cordova.apache.org/docs/en/5.1.1/config_ref/index.html#link-1
• https://github.com/mattdesl/budo
• https://babeljs.io/
• http://browserify.org/

正在使用的插件：

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 上实时加载吗？谢谢！

Answer 1

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

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

假设

• 您的开发机器的 IP 为 192.168.1.8
• 您的应用程序的入口点或主文件是 src/main.js
• 您的 Cordova 应用程序的根目录是 app

武道

运行浮图。Budo 还将注入一个与其 LiveReload 服务器通信的脚本标签。所有转译和捆绑的 ES5 代码都将来自路径“js/bundle.js”。

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

配置文件

开发版

更新您的 Cordova 应用程序的 config.xml，设置内容元素的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 和启用 WKWebView的Telerik 插件。这个插件提供带有内部 httpd 的资产来解决 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），您可能不得不摆弄符号链接和挂钩。

生产索引.html

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

实时重新加载/进行更改

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

更改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（起始页）。我有这个待处理的拉取请求（2015 年 10 月 27 日）。