Cordova热重装在没有离子的设备上 [英] Cordova hot reloading on device without Ionic

问题描述

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

I'm using Cordova without Ionic or any other Framework. My problem is that I don't find any hot reload features or plugins for Cordova without using Ionic. Is there any solution to live reload on the iOS simulator without any frameworks?

推荐答案

我已经实现了'热门'的自定义方式在科尔多瓦重新装载。我不知道它有多原创，但它能很好地满足我的需求。
粗略地说，它的工作方式如下：在开发模式下，启动静态Web服务器，并指示cordova内容是此服务器的URL：< content src =http：// 10.0.3.2:8080/> 。

I've implemented a custom way of 'hot reloading' in Cordova. I don't know how original it is but it works well for my needs. In broad lines it works like this: in development mode a static webserver is started and cordova is instructed that the content is the url of this server: <content src="http://10.0.3.2:8080" />.

静态服务器还监听资产中的变化（js / css / html）和自动重新加载。我们使用gulp connect（ https://www.npmjs.com/package/gulp-connect）实现这一目标。

The static server also listens to changes in the assets (js/css/html) and auto reloads. We use gulp connect (https://www.npmjs.com/package/gulp-connect) to achieve this.

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

In production mode you have to compile the assets and instruct cordova to use the regular static file to load your app.

详细信息：

在 cordova.xml 中，这条线告诉cordova从何处启动应用：

In cordova.xml this is the line that tells cordova where to start the app:

<content src="index.html" />

所以这必须替换为允许热重载的动态版本。我通过使用 gulp-connect 实现了这一点，它启动了一个静态文件服务器。

So this has to be replaced with a 'dynamic' version that would allow hot reload. I achieved this by using gulp-connect which starts a static file server.

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

我创建了两个任务，用于在开发和生产中切换cordova配置：

I created two tasks which switch the cordova configuration in development and in production:

  // 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文件。同样，我通过两个开发/生产任务来实现这一目标。

One important thing you have to ensure that the Cordova javascript files are accessible by the development web server. Again, I achieved this with two tasks for development/production.

  // 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，但这可以使用任何任务运行器实现，当然也可以用于其他平台你必须稍微修改一下这个代码。

I am using gulp here but this can be implemented using any task runner, and of course for other platforms you have to modify this code a bit.

希望这会有所帮助。

这篇关于Cordova热重装在没有离子的设备上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！