Kotlin/JS编译导出为npm模块后带类参数的方法在JS侧为undefined如何解决

• Kotlin/JS编译器默认会为带参数的方法生成带类型签名后缀的修饰名，用来支持方法重载特性，无参数方法因为没有参数签名，修饰名和原方法名一致，所以可以正常访问；带自定义类参数的方法被修改为了hoge_<参数类型哈希>这类名称，因此直接调用hoge会返回undefined。
• 你没有为需要暴露给JS侧的类、方法、自定义参数类添加导出注解，Kotlin默认不会将未显式标注的类/方法暴露给JS调用端。

1. 添加导出注解 #

给所有需要暴露给JS的类、方法、自定义参数类添加@JsExport注解，Kotlin编译器会为标注的内容生成稳定的、和原名称一致的JS可调用符号：

package com.example
import kotlin.js.JsExport

// 暴露Fuga类
@JsExport
class Fuga {
  fun hoge(someClass: SomeClass) {
     // Do something
  }

  fun hoge2() = "Hello"
}

// 作为参数的自定义类也需要导出
@JsExport
class SomeClass {
  // 类定义
}

如果存在方法重载的场景，可以额外搭配@JsName注解为不同的重载方法指定独立的JS侧调用名：

@JsExport
class Fuga {
  @JsName("hogeWithSomeClass")
  fun hoge(someClass: SomeClass) {
  }

  @JsName("hogeWithString")
  fun hoge(str: String) {
  }
}

2. 调整Gradle编译配置 #

在你的build.gradle.kts中添加适配npm模块的编译配置：

kotlin {
    js(IR) {
        // 生成CommonJS格式的npm库
        binaries.library()
        compilations["main"].compilerOptions.apply {
            moduleKind.set(org.jetbrains.kotlin.gradle.dsl.JsModuleKind.MODULE_COMMONJS)
            // 可选：生成TypeScript类型声明文件，1.5.x版本如果报错可以注释该行
            generateDts.set(true)
            sourceMap.set(true)
        }
        // NodeJS环境调用保留nodejs配置，浏览器环境调用保留browser配置
        nodejs()
    }
}

完成以上修改后重新编译打包npm模块，JS侧即可正常调用hoge方法。

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