如何在 Kotlin MPP 中使用 Gradle 粘合 Vert.x web 和 Kotlin 反应

Question

问题

我不清楚如何使用 Gradle (Kotlin DSL) 配置 Kotlin MPP（多平台项目）以将 Vert.x web 用于 Kotlin/JVM 目标与 Kotlin React在 Kotlin/JS 目标上。

更新

You can check out updated minimal example for a working solution inspired by an approach of Alexey Soshin.

我试过的

看看我的 minimal example 关于 GitHub 的 Kotlin MPP，在 JVM 目标上使用 Vert.x Web 服务器，在 JS 目标上使用 Kotlin React。

如果您满足以下条件，就可以让它发挥作用：

第一个运行Gradle任务browserDevelopentRun（我不明白它背后的魔法）和浏览器打开并呈现React SPA之后（单页应用）你可以
停止该任务然后
使用任务 run 启动 Vert.x 后端。

之后，无需刷新浏览器中剩余的SPA，您可以通过按下按钮确认它可以与后端通信，并且它会提示收到数据。

问题

有什么可能 ways/approaches 到 glue 这两个目标所以当我运行我的应用程序时：JS 目标通过 JVM 后端方便地组装和服务？

我在想也许 Gradle 应该触发一些 Kotlin 浏览器 任务，然后以某种方式使它们可用于 Vert.x后端。

Answer 1

那里发生了很多不同的事情。

首先，你的 Vert.x 和 Webpack 运行在同一个端口上。解决这个问题的最简单方法是在其他端口上启动 Vert.x，例如 18080:

.listen(18080, "localhost") { result ->

然后更改 index.kt 文件以使用该端口：

 val result: SomeData = get("http://localhost:18080/data")

因为我们现在运行在不同的端口，我们还需要指定 CORS 处理程序：

       router.apply {
                    route().handler(CorsHandler.create("*"))

最后一个事实是，您不能运行来自同一进程的两个永无止境的 Gradle 任务（好吧，可以，但这很复杂）。所以我建议你打开两个终端，然后运行:

./gradlew run

合而为一

./gradlew jsBrowserDevelopmentRun

在另一个。

完成所有这些后，您应该会看到：

现在，这是针对开发模式的。对于生产模式，您可能不想运行 jsBrowserDevelopmentRun，而是将 jsBrowserProductionWebpack 绑定到您的 run 和服务器 spa.js 来自您的 Vert.x使用 StaticHandler 的应用程序。但是这个答案已经太长了。

Answer 2

但是，如果您想要运行单个任务，则需要您的服务器任务取决于您的 JS 编译。在您的 build.gradle 中添加以下内容：

tasks.withType<org.jetbrains.kotlin.gradle.tasks.KotlinCompile> {
    dependsOn(tasks.getByName<org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpack>("jsBrowserProductionWebpack"))
}

现在调用 run 也会调用 WebPack。

接下来您要提供您的文件。有不同的方法可以做到这一点。一种是使用 Gradle 将它们复制到 Vert.x 资源目录。另一种是将 Vert.x 指向 WebPack 默认放置它们的位置：

route().handler(StaticHandler.create("../../../distributions"))

如何在 Kotlin MPP 中使用 Gradle 粘合 Vert.x web 和 Kotlin 反应

How to glue together Vert.x web and Kotlin react using Gradle in Kotlin MPP

vert.x

reactjs

gradle-kotlin-dsl

kotlin-multiplatform

问题

更新

我试过的

问题