es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Acceder al archivo Javascript en Kotlin/JS

14 Jul, 2023 Programación

Tengo un montón de archivos de JavaScript a los que necesito acceder desde el código Kotlin.

Creé un directorio llamado js-files en mi proyecto raíz con los archivos .js necesarios y un package.json que se ve así:

{
  "name": "js-files",
  "version": "1.0.0",
  "dependencies": {
  }
}

Mi build.gradle se ve así:

plugins {
    kotlin("js")
}

version = "unspecified"

repositories {
    mavenCentral()
}

kotlin {
    js {
        useCommonJs()
        nodejs()
        browser {
            webpackTask {
                output.libraryTarget = "commonjs2"
            }
        }
        binaries.executable()
    }
}

dependencies {
    val path = rootProject.projectDir.resolve("js-files").canonicalPath
    implementation(npm("js-files", "file:$path"))
}

La idea la saqué de este post: enlace.

Para depurar, tengo el siguiente archivo js en js-files:

export function func() {
    console.log("Esta es mi función de prueba.")
}

Y mi archivo principal de Kotlin se ve así:

@JsModule("js-files")
external fun func()

fun main() {
    func()
}

Sin embargo, cuando ejecuto el proyecto utilizando browserDevelopmentRun, recibo este error:

Module not found: Error: No se puede resolver 'js-files' en 'ruta-a-mi-proyecto/build/js/packages/nombre-del-proyecto-js/kotlin-dce-dev'

Tal vez haya una forma más fácil de enlazar mis archivos js, pero después de horas de investigación no encontré nada. Agradezco cualquier ayuda.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para acceder a un conjunto de archivos de Javascript desde código Kotlin, puedes seguir estos pasos:

    1. Crea un directorio llamado “js-files” en el directorio raíz de tu proyecto.
    2. Coloca todos los archivos de Javascript necesarios en este directorio “js-files”.
    3. Crea un archivo “package.json” en este directorio con dependencias vacías.
    4. Actualiza tu archivo build.gradle con el siguiente código:
    plugins {
    kotlin("js")
}

repositories {
    mavenCentral()
}

kotlin {
    js() {
        browser {
            binaries.executable()
            webpackTask {
                output.libraryTarget = "commonjs2"
            }
        }
    }
}

dependencies {
    implementation(npm("js-files", "1.0.0", file("../js-files")))
}
    1. En tu código Kotlin, utiliza la anotación @JsModule con el nombre de la carpeta (“js-files”) como argumento.
    2. Para acceder a una función definida en el archivo Javascript, declara una función external con la misma firma que la función en el archivo Javascript.
    3. Llama a la función external en tu código Kotlin.
    4. Ejecuta browserDevelopmentRun para probar tu código.

    Aquí tienes un ejemplo:

    Archivos de Javascript

    Crea un directorio js-files en el directorio raíz de tu proyecto. Agrega un archivo de Javascript llamado func.js con el siguiente código:

    export function func() {
    console.log("Esta es mi función de prueba.");
}

    Agrega un archivo package.json con dependencias vacías en el directorio js-files.

    Código Kotlin

    Actualiza tu archivo build.gradle como se describe arriba.

    En tu código Kotlin, declara estas funciones:

    @JsModule("js-files")
external object FuncModule {
    fun func()
}

fun main() {
    FuncModule.func()
}

    Ejecución

    Ejecuta browserDevelopmentRun para ver la salida en la consola:

    Esta es mi función de prueba.

Comments are closed.