能否创建无需Webpack/NPM/Yarn的Kotlin JS Gradle配置及KMP项目？

一、Gradle配置方案（规避NPM/Webpack） #

可以通过配置Kotlin多平台插件，完全禁用NPM依赖管理和Webpack打包，直接生成纯Kotlin编译的JS文件，同时保留Ktor后端的JVM构建逻辑。

核心配置要点 #

• 禁用JS目标的NPM自动安装，避免生成yarn.lock/package.json
• 配置JS浏览器目标输出纯编译后的JS文件，不使用Webpack打包
• 分离JVM（Ktor）和JS目标的构建流程

示例build.gradle.kts #

plugins {
    kotlin("multiplatform") version "1.9.20"
    id("io.ktor.plugin") version "2.3.7" // Ktor插件仅用于JVM后端
}

group = "com.example"
version = "1.0-SNAPSHOT"

kotlin {
    // JVM后端（Ktor）
    jvm {
        compilations.all {
            kotlinOptions.jvmTarget = "17"
        }
        withJava()
        application {
            mainClass.set("com.example.ApplicationKt")
        }
    }

    // JS客户端（无NPM/Webpack）
    js {
        browser {
            // 禁用Webpack打包，直接输出编译后的JS
            commonWebpackConfig {
                enabled = false
            }
            // 设置输出目录，生成可直接在HTML中引入的JS文件
            distribution {
                directory.set(project.layout.buildDirectory.dir("js/dist"))
            }
        }
        // 完全禁用NPM相关操作，避免yarn.lock问题
        binaries.executable()
        npm {
            installCommand.set("false") // 禁止自动执行npm install
            lockFile.set(null) // 不生成yarn.lock
        }
    }

    sourceSets {
        val commonMain by getting
        val commonTest by getting {
            dependencies {
                implementation(kotlin("test"))
            }
        }
        val jvmMain by getting {
            dependencies {
                implementation("io.ktor:ktor-server-core-jvm")
                implementation("io.ktor:ktor-server-netty-jvm")
                implementation("io.ktor:ktor-server-content-negotiation-jvm")
                implementation("io.ktor:ktor-serialization-kotlinx-json-jvm")
            }
        }
        val jvmTest by getting {
            dependencies {
                implementation("io.ktor:ktor-server-tests-jvm")
            }
        }
        val jsMain by getting
        val jsTest by getting
    }
}

// 自定义任务：将JS产物复制到Ktor静态资源目录，方便后端直接提供
tasks.register<Copy>("copyJsToStatic") {
    from(tasks.named("jsBrowserDistribution"))
    into(layout.projectDirectory.dir("src/jvmMain/resources/static"))
}

// 让JVM构建依赖JS产物复制任务
tasks.named("jvmProcessResources").configure {
    dependsOn("copyJsToStatic")
}

使用说明 #

1. 运行后端：执行./gradlew jvmRun，Ktor会自动提供static目录下的JS文件和HTML页面
2. 单独构建JS：执行./gradlew jsBrowserDistribution，产物在build/js/dist目录
3. 全程不会生成yarn.lock或调用npm/yarn，彻底规避相关依赖问题

二、无Gradle的纯脚本方案 #

如果不想用Gradle，可以直接调用Kotlin编译器和JVM工具链，手动完成编译、打包和运行。

步骤1：准备依赖包 #

下载以下jar包到本地目录（比如libs/）：

• Kotlin标准库（jvm+js版本）
• Ktor核心、Netty服务器等JVM依赖

步骤2：编译JS客户端 #

# 编译JS代码，生成可直接引入的client.js
kotlinc-js src/jsMain/kotlin/com/example/Client.kt \
    -classpath "libs/kotlin-stdlib-js.jar" \
    -output client.js \
    -meta-info

步骤3：编译JVM后端 #

# 编译Ktor后端代码，生成class文件
kotlinc-jvm src/jvmMain/kotlin/com/example/*.kt \
    -classpath "libs/kotlin-stdlib-jdk8.jar:libs/ktor-core.jar:libs/ktor-server-netty.jar:..." \
    -d build/classes/jvm

# 打包为可执行jar（可选）
jar cvfe backend.jar com.example.ApplicationKt -C build/classes/jvm .

步骤4：运行后端 #

# 直接运行class文件
java -cp "build/classes/jvm:libs/*" com.example.ApplicationKt

# 或运行打包后的jar
java -jar backend.jar

客户端使用 #

创建static/index.html，直接引入编译后的client.js：

<!DOCTYPE html>
<html>
<head>
    <title>Kotlin JS Client</title>
</head>
<body>
    <script src="client.js"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Richard