Question

我是新手使用cordova.One方式重新加载cordova应用程序我知道是使用插件＆cordova-plugin-browsersync＆＃39;。但我的应用程序是由webpack构建的，现在我想要要在浏览器中重新加载，我必须运行＆＃39; webpack-dev-server＆＃39;首先运行＆＃cord;运行浏览器 - --live-reload＆＃39;。我可以更轻松地实现Live Reload的功能并在模拟器中调试实时重新加载吗？

Answer 1

我遇到了同样的问题，但还没有找到一个现成的解决方案，所以下面就是我所做的以及我计划解决它的其他步骤。

我已下载cordova-plugin-browsersync

cordova plugin add cordova-plugin-browsersync无效，所以我手动将其复制到plugins文件夹，更新了cordova的package.json，并从cordova-plugin-browsersync文件夹安装了插件的节点模块。

之后，如果在www文件夹中修改了任何内容，应用程序似乎会更快地更新。

现在必须解决如何从webpack-dev-server输出中间包文件，默认情况下不会这样做。我找到write-file-webpack-plugin，但它没有将所有文件输出到build文件夹，因此可能无法很好地用于此目的。

所以我的计划是

创建一个代码压缩关闭的webpack.config.cordova.js文件
设置任何监视src文件夹并调用node.js脚本的应用程序
哪个脚本以编程方式编译该webpack配置，输出到cordova的www /

Answer 2

我使用npm软件包live-server来处理浏览器平台的重新加载。让它监视platforms/browser/www目录。您的构建系统可能具有监视模式，在该模式下，它可以检测更改并输出已编译的结果。构建完成后，您还需要调用cordova prepare，这可以通过nodemon实现。

在一个完整的示例中将它们放在一起：

将源代码保存在/src中。
以监视模式运行构建工具（例如，webpack --watch或包裹--watch），然后输出到/www
运行nodemon观看/www，并使其运行cordova prepare。 prepare命令会将文件从www复制到平台目录。
（例如：nodemon --watch www --exec \"cordova prepare\"）
运行live-server观看/platforms/browser/www文件夹
中提琴！

这将导致在浏览器平台上使用cordova进行半快速的实时重新加载环境。由于很多事情可以一次运行，因此可以使用npm-run-all并行运行所有脚本。

package.json中的最终脚本可能如下所示：

"scripts": {
    "live-build": "webpack --watch --output-path=www ....",
    "live-watch": "nodemon --watch www --exec \"cordova prepare\" --ext html,css,js",
    "live-serve": "live-server --watch=\"platforms/browser/www\"",
    "start": "npm-run-all -c -n -l -p live-build live-watch live-serve"
}

然后，您只需调用npm start来运行整个实时重新加载环境。这需要针对您的特定项目进行调整，但应该使您大致了解如何实现。

如何制作Cordova App Live Reload，特别是由webpack构建并在设备或模拟器中运行

2 个答案: