如何使用ES6/ES6 2015与Apache一起进行实时重新加载？

Question

我一直在使用ES6/ ES5 2015作为一个项目，通过Babel(ES5)转到ES5，并通过budo与Browserify捆绑在一起。这提供了一个很好的工作流，其中检测到对ES6文件的更改，在没有任何文件I/O的情况下在内存中执行transpiling和增量绑定，并告诉浏览器刷新。

我对Cordova还很陌生，我正在尝试一个类似的工作流程，在这个工作流中，浏览器会被本地的iOS/Android应用程序中的浏览器重新加载。

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

我认为在某个地方需要一个“科多瓦准备”，但我不知道如何集成这个，或者budo是否需要有cordova.js或其他东西的副本。我对.

• 参考文件/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应用程序的根dir是app

布托

运行布托。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，将content元素的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。

Development index.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)，您可能不得不摆弄符号链接和挂钩。

Production index.html

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

现场转播/进行更改

当您编辑由ES2015直接引用(In)的src/main.js文件时，Budo将注意到更改、transpile、bundle，然后通过创建LiveReload注入脚本的WebSockets连接通知客户端。

对app/www/css/index.css进行更改(或使用SASS/ have等，并将其写入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日)。

Answer 2

@约翰尼

欢迎来到Cordova/Phonegap世界。您正在寻找的答案是使用“钩”。这是设计，所以您可以添加一些东西到您的工作流程。

您可以添加或控制，我引用如下：

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

您还应该阅读：Cordova/Phonegap新开发人员犯的最大错误

我下周末要更新它。这个周末，我正在写一个关于whitelist的博客，这个博客已经成为开发中的一个难题。

FWIW:我也在写一个web components博客，但还需要几周的时间。我的主要博客是：http://codesnippets.altervista.org/blog/

在实时重载上，现在有几个开发项目。Phonegap有一个名字叫“水化”。Iconic有一个，MobileFirst也有。现在，一个体面的工作“活的重新装载”是迫切需要。我没有时间检查任何一个新的(谁的名字没有想到)

最好的运气