Question

我一直在使用ES6 / ES2015进行项目，通过Babel（ify）转换为ES5，并通过budo捆绑Browserify。这提供了一个很好的工作流程，其中检测，转换和增量捆绑的更改在内存中完成，没有任何文件I / O，并且告诉浏览器刷新。

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

我已经使用＆＃34; http://192.168.1.8:9966/index.html＆＃34;设置我的config.xml以获得内容元素。这是我的笔记本电脑运行budo的IP。

我认为有一个＆＃34; cordova准备＆＃34;需要某个地方，但我不知道如何整合这个或如果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模拟器日志中没有错误（Debug＆gt; System Log）。

任何人都有ES6和Cordova的现场重装吗？谢谢！

Answer 1

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

通过Budo，Babel和Browserify与Cordova一起进行Live Reload

假设

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

武道

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

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

的Config.xml

开发版

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

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

制作版

<content src="index.html" />

这会正常加载文件系统中的配置。

的index.html

将您的app/www/index.html文件拆分为两个版本：开发和生产。使用shell脚本或类似方法在它们之间切换。

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

开发index.html

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

就我而言，我使用的是iOS9和Telerik plugin that enables WKWebView。此插件为具有内部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），你可能不得不摆弄符号链接和钩子。

生产index.html

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

实时重新载入/进行更改

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

对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日）。

Answer 2

@Johnny，
欢迎来到Cordova / Phonegap世界。您正在寻找的答案是使用"hooks"。这是设计，因此您可以在工作流程中添加内容。

你可以添加或控制，我引用：

before_build
before_clean
before_compile
before_docs
before_emulate
before_platform_add
before_platform_rm/
before_platform_ls
:::
before_prepare
(and more)

您还应该阅读：Top Mistakes by Developers new to Cordova/Phonegap

下周末我会更新它。本周末，我正在whitelist的博客上工作，这已成为发展的一个棘手问题。

FWIW：我也在web components博客上工作，但距离它只有几周之久。我的主要博客是：http://codesnippets.altervista.org/blog/

在实时重新加载上，目前有几项发展。 Phonegap有一个名为“保湿”。 Iconic有一个，MobileFirst（IBM）也是如此。现在，迫切需要一个体面的工作“实时重装”。我没有时间检查任何新的（没有想到的名字）

最好的运气

如何在Apache Cordova上使用ES6 / ES2015进行实时重新加载？

2 个答案:

通过Budo，Babel和Browserify与Cordova一起进行Live Reload

假设

武道

的Config.xml

的index.html

实时重新载入/进行更改

注释

Telerik的WKWebView插件