我尝试使用 Kotlin 创建一个全栈项目。由于多平台项目在 Kotlin 中是实验性的,所以可用的资料不多,所以我尝试从 IDEA 项目向导的项目骨架开始(Kotlin > JS Client 和 JVM Server)。它生成基本代码,甚至添加“hello world”类型的示例代码。
但是,当我构建项目并启动它(gradle run)时,网页控制台告诉我 kotlin-js 包不可用:
The script from “http://127.0.0.1:8080/static/piggy-bank.js” was loaded even though its MIME type (“”) is not a valid JavaScript MIME type.
Loading failed for the <script> with source “http://127.0.0.1:8080/static/piggy-bank.js”. [127.0.0.1:8080:8:1](http://127.0.0.1:8080/)
该示例使用 Netty 作为嵌入式 Web 服务器,预生成的代码为:
embeddedServer(Netty, port = 8091, host = "127.0.0.1") {
routing {
get("/") {
call.respondHtml {
head {
title("Hello from Ktor!")
}
body {
+"${hello()} from Ktor. Check me value: ${Sample().checkMe()}"
div {
id = "js-response"
+"Loading..."
}
script(src = "/static/piggy-bank.js") {}
}
}
}
static("/static") {
resource("piggy-bank.js")
}
}
}.start(wait = true)
它在文件夹中查看已编译的 js 代码static
,但是,gradle 任务不会创建,也不会将生成的文件复制到静态文件夹中。
通过一些重构,我设法使示例正常工作。首先,我找到了所需的代码并在 中找到build/js/packages/piggy-bank/kotlin
,因此我更改了静态配置:
val buildDir = System.getProperty("user.dir")+"/build"
val jsDir = "$buildDir/js/packages/piggy-bank/kotlin"
val jsImpDir = "$buildDir/js/packages_imported/kotlin/1.3.50"
embeddedServer(Netty, port = 8090, host = "127.0.0.1") {
routing {
get("/") {
call.respondHtml {
head {
title("Hello from Ktor!")
}
body {
+"${hello()} from Ktor. Check me value: ${Sample().checkMe()}"
div {
id = "js-response"
+"Loading..."
}
// Note, that I had to add Kotlin system js file manually!
script(src = "/static/kotlin.js") {}
script(src = "/static/piggy-bank.js") {}
}
}
}
static("static") {
// Here comes the new references
files( "$jsDir")
files( "$jsImpDir")
}
}
}.start(wait = true)
这暂时解决了问题,但仅在 IDEA 中有效(直接引用构建文件夹)。正确的解决方案应该是,gradle 构建脚本创建一个自包含、完全可操作的代码。
这是我的(也生成的)gradle 文件(我已经从 Groovy 迁移到 Kotlin DSL):
import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpack
buildscript {
repositories {
jcenter()
}
}
plugins {
id("org.jetbrains.kotlin.multiplatform") version "1.3.50"
}
repositories {
jcenter()
maven( "https://dl.bintray.com/kotlin/ktor" )
mavenCentral()
}
val ktor_version = "1.1.3"
val logback_version = "1.2.3"
kotlin {
js {
browser { }
}
jvm {
compilations.named("main") {
tasks.getByName<Copy>(processResourcesTaskName) {
dependsOn("jsBrowserWebpack")
tasks.named<KotlinWebpack>("jsBrowserWebpack") {
println(this.outputs)
from(entry.name, destinationDirectory)
}
}
}
}
sourceSets {
commonMain {
dependencies {
implementation(kotlin("stdlib-common"))
}
}
commonTest {
dependencies {
implementation(kotlin("test-common"))
implementation(kotlin("test-annotations-common"))
}
}
named("jvmMain") {
dependencies {
implementation( kotlin("stdlib-jdk8"))
implementation( "io.ktor:ktor-server-netty:$ktor_version")
implementation( "io.ktor:ktor-html-builder:$ktor_version")
implementation( "ch.qos.logback:logback-classic:$logback_version")
}
}
named("jvmTest") {
dependencies {
implementation(kotlin("test"))
implementation(kotlin("test-testng"))
}
}
named("jsMain") {
dependencies {
implementation( kotlin("stdlib-js"))
}
}
named("jsTest") {
dependencies {
implementation( kotlin("test-js"))
}
}
}
}
tasks.register<JavaExec>("run") {
dependsOn("jvmJar")
group = "application"
main = "sample.SampleJvmKt"
val t = tasks.named<Jar>("jvmJar")
classpath(configurations.named("jvmRuntimeClasspath"), t.get() )
}
我应该如何更改构建文件以构建正确的代码?