ios - 如何使用 ES6/ES2015 与 Apache Cordova 进行实时重新加载？
<p><p>我一直在一个项目中使用 ES6/ES2015，通过 Babel(ify) 转译为 ES5，并通过 budo 与 Browserify 捆绑。这提供了一个很好的工作流程，其中检测到对 ES6 文件的更改、转译和增量捆绑在内存中完成，无需任何文件 I/O，并通知浏览器刷新。</p>
<p>我是 Cordova 的新手，我正在尝试使用类似的工作流程，将浏览器替换为原生 iOS/Android 应用内浏览器，并在更改时重新加载。</p>
<p>我已将我的 config.xml 设置为使用“<a href="http://192.168.1.8:9966/index.html" rel="noreferrer noopener nofollow">http://192.168.1.8:9966/index.html</a>”的内容元素，这是我运行 budo 的笔记本电脑的 IP。 </p>
<p>我认为某处需要“cordova prepare”，但我不确定如何集成它，或者 budo 是否需要有 cordova.js 的副本或其他东西。我很模糊...</p>
<ul>
<li> <a href="https://cordova.apache.org/docs/en/5.1.1/config_ref/index.html#link-1" rel="noreferrer noopener nofollow">https://cordova.apache.org/docs/en/5.1.1/config_ref/index.html#link-1</a> </li>
<li> <a href="https://github.com/mattdesl/budo" rel="noreferrer noopener nofollow">https://github.com/mattdesl/budo</a> </li>
<li> <a href="https://babeljs.io/" rel="noreferrer noopener nofollow">https://babeljs.io/</a> </li>
<li> <a href="http://browserify.org/" rel="noreferrer noopener nofollow">http://browserify.org/</a> </li>
</ul>
<p>正在使用的插件:</p>
<pre><code>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"
</code></pre>
<p>iOS 模拟器日志(调试 > 系统日志)中没有错误。</p>
<p><em>有人为 ES6 和 Cordova 工作过实时重载吗？</em>谢谢!</p></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p><em>好的，我想通了。似乎没有人走这条路，但它非常棒。</em></p>
<h2>通过 Budo、Babel 和 Browserify 使用 Cordova 实时重新加载</h2>
<h3>假设</h3>
<ul>
<li>您的开发机器的 IP 为 192.168.1.8</li>
<li>您应用的入口点或主文件是 <code>src/main.js</code></li>
<li>您的 Cordova 应用的根目录是 <code>app</code></li>
</ul>
<hr/>
<h3>武道</h3>
<p>运行 <a href="https://github.com/mattdesl/budo" rel="noreferrer noopener nofollow">budo</a> . Budo 还将注入(inject)一个与 LiveReload 服务器对话的脚本标签。您所有转译和捆绑的 ES5 代码都将来自路径“js/bundle.js”。</p>
<pre><code>budo src/main.js:js/bundle.js \
--dir=app/www \
--live="app/www/**/*" \
-t babelify | garnish
</code></pre>
<hr/>
<h3>配置.xml</h3>
<p><strong>开发版</strong></p>
<p>更新您的 Cordova 应用程序的 config.xml，设置 <em>content</em> 元素的 <em>src</em> 属性以从您的 budo 实例而不是本地加载应用程序内容(例如 index.html)文件系统。</p>
<pre><code><content src="http://192.168.1.8:9966/index.html" />
</code></pre>
<p><strong>生产版</strong></p>
<pre><code><content src="index.html" />
</code></pre>
<p>这会照常从文件系统加载配置。</p>
<hr/>
<h3>索引.html</h3>
<p>将您的 <code>app/www/index.html</code> 文件分成 2 个版本:开发和生产。使用 shell 脚本或类似脚本在它们之间切换。</p>
<p>两个版本的 index.html 都通过脚本标签引用 <code>js/bundle.js</code>。</p>
<p><strong>发展指数.html</strong></p>
<p>index.html的开发版也需要加载<code>cordova.js</code>和<code>cordova_plugins.js</code>。 </p>
<p>就我而言，我使用的是 iOS9 和 <a href="https://github.com/Telerik-Verified-Plugins/WKWebView" rel="noreferrer noopener nofollow">Telerik plugin that enables WKWebView</a> .这个插件提供带有内部 httpd 的 Assets 来解决 iOS 错误，可以在 <code>http://localhost:1234</code> 找到。因此，我只需从那里加载 <code>cordova.js</code> 和 <code>cordova_plugins.js</code>。 </p>
<pre><code><script type="text/javascript" src="http://localhost:12344/cordova.js"></script>
<script type="text/javascript" src="http://localhost:12344/cordova_plugins.js"></script>
</code></pre>
<p>因此，您的开发 index.html 应该有一个内容安全策略，允许加载所有这些内容。</p>
<pre><code><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:*" />
</code></pre>
<p>在其他情况下(例如 Android)，您可能不得不摆弄符号链接(symbolic link)和 Hook 。</p>
<p><strong>生产索引.html</strong></p>
<p>您只需要加载<code>js/bundle.js</code>，不需要引用<code>192.168.1.8</code>的内容安全策略条目。</p>
<hr/>
<h3>实时重新加载/进行更改</h3>
<p>当你编辑一个由 <code>src/main.js</code> 直接引用的 ES2015 文件时，Budo 会注意到更改、转译、捆绑，然后通过创建 LiveReload 的 WebSockets 连接通知客户端注入(inject)脚本。</p>
<p>对 <code>app/www/css/index.css</code> 进行更改(或使用 SASS/LESS 等并将其写入 index.css)。 Budo 会注意到并发送更改以在不重新加载页面的情况下实现。</p>
<p>对 <code>app/www/index.html</code> 进行更改，Budo 会注意到并通过其 LiveReload 服务器发送这些更改。</p>
<hr/>
<h3>注意事项</h3>
<ul>
<li><code>deviceready</code> 只会像您预期的那样触发一次，而不是在对 ES2015 文件的每次更改时触发。</li>
<li>添加/删除插件或更改 config.xml 将通过重新构建实现:<code>cordova run ios</code>。</li>
<li>如果您在构建后定期看到文件被缓存，请清理项目并重新构建:<code>cordova clean ios</code>。</li>
</ul>
<hr/>
<h3>Telerik 的 WKWebView 插件</h3>
<p>如果您使用 Telerik WKWebView 插件，请使用来自 github 的最新版本，而不是 NPM。 </p>
<pre><code>cordova plugin add https://github.com/Telerik-Verified-Plugins/WKWebView
</code></pre>
<p>当前插件代码中存在错误处理基于 http 的 <code>content</code>(起始页)的加载。我有一个 <a href="https://github.com/Telerik-Verified-Plugins/WKWebView/issues/186" rel="noreferrer noopener nofollow">pull request</a>为此待定(2015 年 10 月 27 日)。</p></p>
<p style="font-size: 20px;">关于ios - 如何使用 ES6/ES2015 与 Apache Cordova 进行实时重新加载？，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/33337602/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/33337602/
</a>
</p>
页:
[1]