Kotlin 多平台项目上的 Js 模块构建失败答案

【问题标题】：Js module build fails on Kotlin multiplatform projectKotlin 多平台项目上的 Js 模块构建失败
【发布时间】：2019-01-24 08:42:03
【问题描述】：

构建失败并显示错误消息：

./output.js 中的错误未找到模块：错误：无法解析“常见” 在 'C:\Users\User\Documents\MultiPlatformTodo\web\web' @ ./output.js 340:91-108

./output.js 中的错误未找到模块：错误：无法解析“kotlin” 在 'C:\Users\User\Documents\MultiPlatformTodo\web\web' @ ./output.js 340:18-35

./output.js 中的错误未找到模块：错误：无法解析 'C:\Users\User\Documents\MultiPlatformTodo\web\web' 中的 'kotlin-react' @ ./output.js 340:37-60

./output.js 中的错误未找到模块：错误：无法解析 'kotlin-react-dom' 在 'C:\Users\User\Documents\MultiPlatformTodo\web\web' @ ./output.js 340:62-89

./output.js 中的错误未找到模块：错误：无法解析 'kotlinx-coroutines-core' 在 'C:\Users\User\Documents\MultiPlatformTodo\web\web' @ ./output.js 340:110-144

./output.js 中的错误未找到模块：错误：无法解析 'kotlinx-html-js' 在 'C:\Users\User\Documents\MultiPlatformTodo\web\web' @ ./output.js 340:146-172

FAILURE：构建失败并出现异常。

出了什么问题：任务 ':web:webpack-bundle' 执行失败。节点 webpack.js 失败（退出代码 = 2）

js模块build.gradle定义如下：

apply plugin: 'org.jetbrains.kotlin.frontend'
apply plugin: 'kotlin2js'

kotlinFrontend {
    npm {
        dependency("react", "16.6.0")
        dependency("react-dom", "16.6.0")
        dependency("@material-ui/core", "1.4.3")
    }

    sourceMaps = true

    webpackBundle {
        bundleName = "mpnotes"
        contentPath = file('src/main/web')
    }
}

dependencies {
    implementation project(':common')
    implementation "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    implementation "org.jetbrains.kotlinx:kotlinx-html-js:0.6.11"
    implementation "org.jetbrains:kotlin-react:16.6.0-pre.61-kotlin-1.3.0"
    implementation "org.jetbrains:kotlin-react-dom:16.6.0-pre.61-kotlin-1.3.0"
}

compileKotlin2Js {
    kotlinOptions {
        outputFile = "${projectDir}/web/output.js"
        metaInfo = true
        moduleKind = "commonjs"
        sourceMap = true
    }
}

和settings.gradle:

enableFeaturePreview('GRADLE_METADATA')

rootProject.name = 'MultiPlatformTodo'
include 'android'
include 'web'
include 'common'

这是common 模块的内容：

apply plugin: 'kotlin-multiplatform'

kotlin {
    targets {
        fromPreset(presets.jvm, 'jvm')
        fromPreset(presets.js, 'js')
    }

    sourceSets {
        commonMain {
            dependencies {
                implementation 'org.jetbrains.kotlin:kotlin-stdlib-common'
                implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core-common:$coroutines_version"
            }
        }

        commonTest {
            dependencies {
                implementation "org.jetbrains.kotlin:kotlin-test-common"
                implementation "org.jetbrains.kotlin:kotlin-test-annotations-common"
            }
        }

        jvmMain {
            dependencies {
                implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
                implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core:$coroutines_version"
            }
        }

        jsMain {
            dependencies {
                implementation "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
                implementation "org.jetbrains.kotlinx:kotlinx-coroutines-core-js:$coroutines_version"
            }
        }
    }
}

kotlin {
    experimental {
        coroutines "enable"
    }
}

【问题讨论】：

请同时发布common项目构建脚本的内容。
@Ilya 刚刚用common 项目更新了问题
@EdsonMenegatti 你有机会解决它。

标签： kotlin kotlin-multiplatform kotlin-js

【解决方案1】：

我看到两个可能的问题。

第一个是你应该使用多平台 gradle 插件而不是 kotlin2js，即 kotlin-multiplatform，它更新并且将有更多的长期支持，或者 kotlin-platform-js，这可能是一个更容易的替代品适合您当前的设置。

另一个问题是implementation project(':common') 行。这告诉 gradle 你正在使用公共模块作为 js 依赖项，因为这是一个 js 项目。对于kotlin-platform-js，您应该改用expectedBy project(':common') 将其链接为公共依赖项。对于kotlin-multiplatform，您需要对依赖项配置进行更多更改。可以看到一些细节here

【讨论】：

我这里提到的js模块不是js库，而是使用common库的常规js模块。需要kotlin2js插件将里面的kotlin代码转换成js，以便在html文件中引用。

【解决方案2】：

我知道这有点晚了，但如果你在 build.gradle 中添加 apply plugin: 'kotlin-dce-js' 就可以了

【讨论】：