Kvision项目中JS调用Kotlin方法及编译机制问题

要让JS直接调用你的Kotlin类和函数，核心是将Kotlin代码暴露到JS全局作用域，关键步骤如下：

1. 添加@JsExport注解
   Kotlin/JS默认不会将内部类、函数暴露给外部JS，必须用kotlin.js.JsExport注解标记需要导出的元素。修改你的代码：

package com.zzz

import kotlin.js.JsExport

@JsExport
class KotlinHelper {
    fun doXXX(str: String): Int = str.length
    fun doYYY(bytes: ByteArray): String = bytes.decodeToString()
}

@JsExport
val kotlinHelper = KotlinHelper()

2. 确认编译配置
   确保build.gradle.kts中Kotlin/JS目标使用IR编译器（Kvision模板默认启用），并生成可执行二进制文件：

kotlin {
    js {
        browser()
        binaries.executable()
        // 其他原有配置...
    }
}

3. JS中的调用方式
   打包后的main.bundle.js加载后，你的类和变量会挂载到全局命名空间下，直接通过包名访问：

// 调用doXXX
com.zzz.kotlinHelper.doXXX("something"); // 返回字符串长度

// 调用doYYY时，注意Kotlin ByteArray对应JS的Uint8Array
const bytes = new Uint8Array([104, 101, 108, 108, 111]);
com.zzz.kotlinHelper.doYYY(bytes); // 返回"hello"

编译打包流程 #

你的Kotlin/JS项目基于Kvision模板，核心依赖Kotlin官方js插件和webpack：

• Kotlin编译器将.kt代码转译为现代JS（IR编译器生成更高效的代码）
• webpack负责合并Kotlin生成的JS、Kvision框架代码及其他依赖，最终输出main.bundle.js
• 生产环境下，webpack默认通过terser-webpack-plugin完成代码混淆、压缩和变量名替换

保留自定义方法原名 #

完全可行，有两种常用方案：

1. 全局保留所有名称
   在build.gradle.kts的Kotlin配置中开启keepNames，强制编译器保留类、函数的原名：

kotlin {
    js {
        browser()
        binaries.executable()
        keepNames = true
    }
}

适合调试或需要大量导出元素的场景。

2. 给特定方法指定固定名称
   用@JsName注解给单个函数/类指定别名，混淆时不会修改该名称：

@JsExport
class KotlinHelper {
    @JsName("doXXX")
    fun doXXX(str: String): Int = str.length
}

这种方式更精细，仅保留你需要的方法名称。

未使用的Kotlin代码是否会被移除？ #

会被移除。Kotlin/JS编译器和webpack都会执行死代码消除（Dead Code Elimination）：

• 如果一段Kotlin代码既没有被项目内其他代码引用，也没有通过@JsExport/@JsName暴露给JS，编译时会被直接剔除
• 若需保留未被引用的代码（比如供JS后续动态调用），必须用@JsExport标记，或在webpack配置中禁用对应代码的消除规则

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