如何在 Kotlin MPP 中使用 Gradle 将 Vert.x web 和 Kotlin 粘合在一起

Question

问题

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

更新

您可以查看更新后的minimal example 以获得有效的解决方案 受到 Alexey Soshin 方法的启发。

我尝试过的

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

如果你满足以下条件，你可以让它工作：

• 首先运行 Gradle 任务 browserDevelopentRun（我不明白它背后的魔法），在浏览器打开并呈现 React SPA（单页应用程序）后，您可以
• 停止该任务，然后
• 使用任务 run 启动 Vert.x 后端。

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

问题

粘合这两个目标的可能方式/方法是什么，所以当我运行我的应用程序时：JS 目标是通过 JVM 后端方便地组装和服务的？

我认为 Gradle 应该触发一些 Kotlin 浏览器 任务，然后以某种方式将它们提供给 Vert.x 后端。

Answer 1

但是，如果您想运行单个任务，则需要您的服务器任务取决于您的 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"))

Answer 2

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

首先，您的 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，而是使用 StaticHandler 从您的 Vert.x 应用程序将 jsBrowserProductionWebpack 绑定到您的 run 和服务器 spa.js。但是这个答案已经太长了。