没有 Ionic 的设备上的 Cordova 热重载

Posted 2023-02-23

【中文标题】没有 Ionic 的设备上的 Cordova 热重载

【英文标题】：Cordova hot reloading on device without Ionic

【发布时间】：2018-02-26 00:26:09

【问题描述】：

我正在使用没有 Ionic 或任何其他框架的 Cordova。我的问题是，如果不使用 Ionic，我找不到任何适用于 Cordova 的热重载功能或插件。有没有什么解决方案可以在没有任何框架的情况下在 ios 模拟器上实时重新加载？

【问题讨论】：

github.com/nparashuram/cordova-plugin-browsersync

【参考方案1】：

我在 Cordova 中实现了一种自定义的“热重载”方式。我不知道它有多原始，但它很适合我的需求。 概括地说，它的工作原理是这样的：在开发模式下，会启动一个静态 Web 服务器，并指示 Cordova 内容是该服务器的 url：<content src="http://10.0.3.2:8080" />。

静态服务器还会监听资产 (js/css/html) 的变化并自动重新加载。我们使用 gulp connect (https://www.npmjs.com/package/gulp-connect) 来实现这一点。

在生产模式下，您必须编译资产并指示 Cordova 使用常规静态文件来加载您的应用程序。

详情：

在 cordova.xml 中，这行告诉 cordova 从何处启动应用程序：

<content src="index.html" />

因此必须将其替换为允许热重载的“动态”版本。我通过使用启动静态文件服务器的gulp-connect 实现了这一点。

  gulp.task('connect', function () 
    return connect.server(
      root: 'www',
      livereload: true,
      fallback: 'www/index.html',
      https: false
    );
  );

我创建了两个任务来切换开发和生产中的cordova配置：

  // Development
  // adds the localhost(on the emulator as 10.0.3.2) as
  // the content source for the cordova app
  gulp.task('cordova-dev-server-android', function () 
    return gulp.src(['config.xml'])
      .pipe(replace(/(<content src=\")(.+)(\" \/>)/g, "$1http://10.0.3.2:8080$3"))
      .pipe(gulp.dest('.'));
  );

  // Production
  // adds the static file as
  // the content source for the cordova app
  gulp.task('cordova-static-file', function () 
    return gulp.src(['config.xml'])
      .pipe(replace(/(<content src=\")(.+)(\" \/>)/g, "$1index.html$3"))
      .pipe(gulp.dest('.'));
  );

您必须确保开发 Web 服务器可以访问 Cordova javascript 文件。同样，我通过两项开发/生产任务实现了这一目标。

  // Development
  // Creates symlinks for the devserver
  // so the app has access to cordova files
  gulp.task('create-cordova-symlink-android', ['remove-cordova-symlink'], function () 
    return gulp.src('')
      .pipe(exec('ln -sv ../platforms/android/assets/www/cordova.js www'))
      .pipe(exec.reporter())
      .pipe(exec('ln -sv ../platforms/android/assets/www/cordova_plugins.js www'))
      .pipe(exec.reporter())
      .pipe(exec('ln -sv ../platforms/android/assets/www/plugins www'))
      .pipe(exec.reporter());
  ); 


  // Production
  // Removes symlinks for production
  // see create-cordova-symlink-android
  gulp.task('remove-cordova-symlink', function () 
    var options = 
      continueOnError: true
    ;
    return gulp.src('')
      .pipe(exec('rm www/cordova.js', options))
      .pipe(exec('rm www/cordova_plugins.js', options))
      .pipe(exec('rm -Rf www/plugins', options));
  );

我在这里使用 gulp，但这可以使用任何任务运行器来实现，当然对于其他平台，您必须稍微修改此代码。

希望这会有所帮助。

【讨论】：

@ilteris 我添加了更多细节

谢谢你，这是伟大的 Ionut！

谢谢！我能够按照这个例子得到我的 Reactjs 应用程序，用 Create React App 创建，在 Android 上实时重新加载。现在我只是手动修改 config.xml 内容 src 以及手动创建符号链接。在这个启动项目中，/public 文件夹是配置 webpack 服务的地方，所以我把符号链接放在那里。

抱歉这个傻瓜问题。我应该把这段代码放在哪里？我如何区分开发和产品？我应该通过构建后脚本或其他方式调用它吗？ （使用 ReactJS + Cordova）