如何使用Gradle创建Kotlin React应用？求技术指导

我来帮你梳理下避开坑的可行路径，不用再纠结复杂的webpack配置——其实Gradle+Kotlin Multiplatform（KMP）已经帮我们封装好了大部分繁琐工作。

1. 从KMP模板起步 #

直接在IntelliJ中创建Kotlin Multiplatform项目（不用在意“实验性功能”标签，现在这个方案已经很稳定了），创建时选择“JS”作为目标平台之一。接下来只需要修改配置文件就能快速接入React。

2. 核心配置：build.gradle.kts #

替换或补充以下内容，Gradle会自动处理webpack、依赖管理这些细节：

plugins {
    kotlin("multiplatform") version "1.9.20" // 建议用最新稳定版
    kotlin("plugin.serialization") version "1.9.20" // 可选，需要序列化功能时添加
}

kotlin {
    js(IR) { // 必须使用IR编译器，这是Kotlin JS的新标准
        browser {
            commonWebpackConfig {
                cssSupport.enabled = true // 开启CSS支持
                devServer = devServer?.copy(
                    open = true // 启动开发服务器时自动打开浏览器
                )
            }
        }
        binaries.executable()
    }

    sourceSets {
        val jsMain by getting {
            dependencies {
                // React核心依赖
                implementation(kotlin("react"))
                implementation(kotlin("react-dom"))
                // 可选：添加React路由支持
                implementation(kotlin("react-router-dom"))
                // 可选：UI组件库，比如MUI的Kotlin封装
                implementation("org.jetbrains.kotlin-wrappers:kotlin-mui:5.14.15-pre.600")
            }
        }
        val jsTest by getting {
            dependencies {
                implementation(kotlin("test-js"))
            }
        }
    }
}

3. 编写第一个React组件 #

在src/jsMain/kotlin下创建你的组件代码，比如：

import react.FC
import react.dom.client.createRoot
import web.dom.document

val App = FC {
    h1 {
        +"Hello Kotlin React with Gradle!"
    }
}

fun main() {
    val root = document.getElementById("root")!!
    createRoot(root).render(App())
}

同时确保src/jsMain/resources/index.html有挂载节点：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Kotlin React App</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

4. 运行与构建项目 #

• 启动带热重载的开发服务器：

  ./gradlew runBrowserDevelopmentRun
  

• 构建生产环境包（输出到build/distributions目录）：

  ./gradlew browserProductionWebpack
  

为什么你之前的方案失败了？ #

把KMP编译的Jar包加到create-react-kotlin-app里行不通，主要原因是：

• KMP编译的JS是ES模块格式，而create-react-kotlin-app的预配置webpack对外部Kotlin模块的兼容性很差
• 分开管理两个项目会导致依赖、编译流程脱节，IDE的代码补全和调试支持也会受影响

直接用Gradle的KMP配置，所有工具链（编译、webpack、开发服务器）都是统一管理的，完全不用你手动写webpack配置，还能保留IDE的完整支持，完美匹配你的需求。

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