Kotlin/JS React项目如何引用index.html中的外部JS API？

方法1：直接访问全局作用域调用 #

在index.html引入external_app_sdk.js后，SDK的方法会挂载到浏览器全局对象window上，你可以在Kotlin/JS中直接声明并访问：

步骤1：声明全局SDK类型（可选，获得类型提示） #

// 声明全局window对象
@JsName("window")
external val window: dynamic

// 定义SDK的接口结构，根据实际SDK方法调整
external interface ExternalAppSDK {
    fun initApp(config: dynamic): Unit
    fun fetchUserData(): dynamic
}

// 拿到全局的SDK实例
val externalSdk: ExternalAppSDK get() = window.ExternalAppSDK

步骤2：在React组件中调用 #

fun App() {
    useEffect(dependencies = emptyArray()) {
        // 调用SDK初始化方法
        externalSdk.initApp(object {
            val iframeId = "embedded-app-frame"
        })
        // 获取数据并处理
        val userData = externalSdk.fetchUserData()
        console.log("User data:", userData)
    }

    return div {
        +"Embedded Iframe App"
    }
}

方法2：通过webpack配置全局暴露npm包 #

如果已经通过implementation(npm("external_app_sdk", "1.2.3"))安装了包，但它没有模块导出，可以通过webpack将其暴露为全局变量：

步骤1：添加webpack配置文件 #

在项目根目录创建webpack.config.d文件夹，新建global-sdk.config.js：

const webpack = require('webpack');

module.exports = {
    plugins: [
        new webpack.ProvidePlugin({
            // 根据SDK实际暴露的全局名称调整，比如SDK挂载为window.ExternalAppSDK
            ExternalAppSDK: 'external_app_sdk'
        })
    ]
};

步骤2：Kotlin中调用 #

和方法1的声明方式一致，直接使用externalSdk即可。

方法3：手动创建ES模块包装器 #

如果上述方法不适用，你可以手动写一个JS包装文件，把全局SDK转为ES模块：

步骤1：创建包装文件 #

在src/main/resources/static下新建sdk-wrapper.js：

// 假设SDK挂载在window.ExternalAppSDK
export const ExternalAppSDK = window.ExternalAppSDK;

步骤2：Kotlin中导入包装模块 #

@JsModule("./sdk-wrapper.js")
@JsNonModule
external val ExternalAppSDK: dynamic

步骤3：组件中调用 #

fun App() {
    ExternalAppSDK.initApp(object {
        val appKey = "your-app-key"
    })
    return div { +"Iframe App Content" }
}

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