Consume Kotlin Multiplatform Library in vanilla JS web app

user_3215816 0
Viewed 120

I have a Kotlin multiplatform library that targets Kotlin/JVM and Kotlin/JS (Browser) containing some domain classes and business logic that needs to be shared across both frontend and backend. Consuming the multiplatform library as a simple Gradle/Maven dependency in the Java-based backend project was relatively easy and flawless. However, I'd like to write the frontend in plain Javascript or Typescript (not Kotlin) but call methods and classes in the Kotlin multiplatform library (which I have built for JS as well). Is this possible, and how would I do it?

kotlin-multiplatform kotlin javascript
1 Answers

The below configuration in build.gradle.kts worked for me:

kotlin {
    js(LEGACY) {
        browser {
            webpackTask {
                outputFileName = "myLibrary.js"
                output.library = "myLibrary"
                output.libraryTarget = "var"
            }
        }
        binaries.executable()
    }
}

It appears that the [output.library][1] and [output.libraryTarget][2] map to their corresponding Webpack configuration values. The Webpack documentation says that setting output.libraryTarget = "var" will expose the module as a variable in the global scope. output.library = "myLibrary" indicates that the global variable will be named myLibrary.

The library can then be imported via a script tag in the project's index.html file, e.g.:

<!DOCTYPE html>

<html>
<body>

<script type="text/javascript" src="path/to/myProject.js"></script>

</body>
</html>

Calling a library function is then done with fully qualified package names within the global object that was created, e.g.:

myLibrary.com.my.library.doStuff()

I hope that helps!

user_153251750
Related