Kotlin/JS项目能否导入JavaScript文件？如何调用其中的JS函数

1. 放置JS文件到资源目录 #

将myfile.js放到Kotlin/JS项目的JS资源目录下，默认路径为src/jsMain/resources，如果是多平台项目，请放到对应JS目标的resources目录中。

2. 配置项目加载JS文件 #

在项目的build.gradle.kts中添加如下配置，确保编译打包时会正确处理该JS文件：

kotlin {
    js {
        browser {
            commonWebpackConfig {
                // 添加资源目录为webpack的静态资源路径
                static.add("src/jsMain/resources")
            }
        }
        binaries.executable()
    }
}

如果是浏览器端项目，也可以跳过该配置，直接在HTML入口文件中添加<script src="myfile.js"></script>引入JS文件

3. Kotlin代码中声明并调用函数 #

根据你的JS文件是否导出为模块，选择对应声明方式：

方式一：JS函数为全局作用域（无需修改原JS文件） #

你原有的myfile.js没有做模块导出，函数会挂载到全局作用域，直接声明外部函数即可：

// 声明JS环境中已存在的外部函数
external fun myJsFunc(): String

fun main() {
    // 直接调用函数
    val jsReturn = myJsFunc()
    println(jsReturn) // 输出：Hello from JavaScript
}

方式二：JS文件作为ES模块导入 #

先修改myfile.js添加函数导出：

export function myJsFunc() { return "Hello from JavaScript"; }

再在Kotlin中用注解声明导入的模块函数：

@JsModule("./myfile.js")
@JsNonModule
external fun myJsFunc(): String

fun main() {
    val jsReturn = myJsFunc()
    println(jsReturn)
}

注意：使用ES模块导入时，要确保路径和资源打包后的实际路径匹配，否则会出现模块找不到的运行时错误 #

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