Kotlin JavaScript：用于 React 应用程序的捆绑包

Question

我有一个想要导出的 Kotlin JS 项目，以便在非 Kotlin React 应用程序中使用它。

我尝试过的事情（假设模块名为exportedlib）：

1. 将其导出为 CommonJS 模块，使用 gradlew compileKotlinJs 编译它。

然后我将 build/js/packages/exportedlib/kotlin/exportedlib.js 复制到 React 应用程序并在 App.js 中使用 import exportedlib from './exportedlib' 导入它。

当使用 npm start 编译时，我会收到以下错误消息：Module not found: Can't resolve 'kotlin'

1. 然后我还将 kotlin.js 从 build/js/packages_imported/kotlin/1.3.72/kotlin.js 导入到 React 应用程序中。

然后我收到错误消息：

./src/kotlin.js
  Line 2:39:      'define' is not defined                                                no-undef

1. 如上所述，我还在 build.gradle 中添加了浏览器目标，并将其导出为 gradlew browserDistribution。

然后我从 npm 收到这些错误消息：

./src/exportedlib.js
  Line 1:1:      Expected an assignment or function call and instead saw an expression  no-unused-expressions
  Line 1:112:    'define' is not defined                                                no-undef
  Line 1:123:    'define' is not defined                                                no-undef
  Line 1:500:    Expected an assignment or function call and instead saw an expression  no-unused-expressions
// ... a lot of other "Expected an assignment or function call and instead saw an expression" error messages

谁能帮我导出一个 Kotlin JS 库，以便在 React 应用程序中使用它？

这是我的 build.gradle：

plugins {
    id 'org.jetbrains.kotlin.js' version '1.3.72'
}

repositories {
    mavenCentral()
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-js"
    testImplementation "org.jetbrains.kotlin:kotlin-test-js"
}

kotlin.target.nodejs { }

// added as above didn't work
kotlin.target.browser { }

compileKotlinJs.kotlinOptions.moduleKind = "commonjs"

更新

vanyochek 的答案在使用 ./gradlew compileProductionExecutableKotlinJs 导出时适用于我，但仅适用于带有实验性 IR 后端的 Kotlin 1.4 M2。

我们将不胜感激 Kotlin 1.3 的任何解决方案。

Answer 1

您可以尝试使用1.4-M2 版本的 Kotlin 和 IR 后端。 你需要更改build.gradle文件：

plugins {
    id 'org.jetbrains.kotlin.js' version '1.4-M2'
}

repositories {
    mavenCentral()
    maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }
}

dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-js"
    testImplementation "org.jetbrains.kotlin:kotlin-test-js"
}

kotlin {
    js(IR) {
        useCommonJs()
        browser {}
        nodejs {}
        binaries.executable()

        compilations.all {
            kotlinOptions.moduleKind = "commonjs"
        }
    }
}

和 settings.gradle：

pluginManagement {
    repositories {
        maven { url 'https://dl.bintray.com/kotlin/kotlin-eap' }

        mavenCentral()

        maven { url 'https://plugins.gradle.org/m2/' }
    }
}
rootProject.name = 'exportedlib'

JS 编译完成后，只需将exportedlib.js 添加到您的 React 项目中即可。

注意：Kotlin 1.4-M2 和 IR 后端不稳定。