使用 WebAssembly 和 Kotlin：从入门到精通

引言：为什么 WebAssembly 和 Kotlin 是理想组合

现代 Web 开发不仅需要速度，还需要安全性。WebAssembly (Wasm) 是一种低级二进制格式，在浏览器中以接近原生的速度执行。而 Kotlin 是一种现代多平台语言，可编译为 JVM 字节码、JavaScript，并且最近还可以编译为 WebAssembly。

Kotlin 和 WebAssembly 的结合开辟了新的可能性：您可以使用熟悉的语言和强大的类型系统编写复杂的逻辑，然后在任何现代浏览器中运行它，而无需 JavaScript 的开销。在本文中，我们将详细讲解使用 WebAssembly 和 Kotlin 从入门到精通：从工具安装到部署完整的应用程序。

1. 配置 Kotlin/Wasm 环境

在编写代码之前，需要准备好环境。在撰写本文时，Kotlin/Wasm 的官方支持仍处于实验阶段（从 Kotlin 1.9.20 开始）。您需要准备：

• JDK 11 或更高版本（推荐 JDK 17）
• IntelliJ IDEA（Community 版即可）或任何支持 Gradle 的编辑器
• 最新版本的 Kotlin（1.9.22+）。

创建项目

创建一个新的 Gradle 项目，并配置多平台设置。在 build.gradle.kts 文件中指定插件和 Wasm 目标：

plugins {    kotlin("multiplatform") version "1.9.22"    kotlin("plugin.serialization") version "1.9.22" // 可选}

kotlin {    wasmJs {        binaries.executable()        nodejs()        browser {            commonWebpackConfig {                cssSupport {                    enabled.set(true)                }            }        }    }

    sourceSets {        val commonMain by getting        val wasmJsMain by getting {            dependencies {                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core:1.7.3")            }        }    }}

Gradle 同步后，项目结构即可用于编译为 Wasm。

2. 编写第一个 Kotlin/Wasm 程序

创建一个简单的模块，用于计算数字的阶乘——这是展示 Wasm 性能的理想示例。

Kotlin 代码

在 src/wasmJsMain/kotlin 文件夹中创建文件 Main.kt：

import kotlinx.coroutines.*

// 将导出到 Wasm 的函数@WasmExportfun factorial(n: Int): Long {    if (n < 0) return -1L    var result = 1L    for (i in 2..n) {        result *= i    }    return result}

// 浏览器的入口点fun main() {    println("Kotlin/Wasm 已加载！")    // 使用协程进行异步调用    GlobalScope.launch {        val result = factorial(10)        println("10 的阶乘：$result")    }}

@WasmExport 注解使该函数可从 JavaScript 访问。请注意：并非所有 Kotlin 类型都可以导出——仅支持基本类型、字符串和数组。

构建和运行

执行 Gradle 命令：

./gradlew wasmJsBrowserDevelopmentRun

构建完成后，浏览器将打开并显示控制台输出。如果一切顺利，您刚刚在 WebAssembly 中运行了 Kotlin！

3. 与 JavaScript 交互：连接两个世界的桥梁

Kotlin/Wasm 的关键功能之一是能够与 JavaScript 进行双向交互。您可以从 Kotlin 调用 JS 函数，反之亦然。

从 Kotlin 调用 JavaScript

在 Main.kt 中添加使用浏览器 DOM API 的代码：

import org.w3c.dom.*

@WasmExportfun showAlert(message: String) {    // 使用全局 window 对象    window.alert("Kotlin 调