Создание приложения Kotlin React с использованием gradle

Question

Я с нетерпением ждал, как создать приложение kotlin-реагировать на приложение с помощью gradle (мне известен инструмент CLI create-kotlin-реагировать-приложение, в котором не используется radle), и я не смог найти источники, на которые можно было бы указать через меня Я наткнулся на плагин внешнего интерфейса kotlin (он работает) и плагин npm и webpack, но я не смог настроить их для запуска / создания своего проекта kotlin-реагировать. Я не специалист по настройке веб-пакетов, так что это, вероятно, еще сложнее для меня.

Начальные намерения

Я намерен создать мультиплатформенный проект (да, Kotlin Experiental упакован в IntelliJ)

Альтернативный подход

когда я потерпел неудачу, я решил пойти с этим подходом.

1. Напишите мой код, используя мультиплатформенный плагин kotlin
2. Скомпилируйте его в банку
3. Добавьте его как библиотеку в приложение create-реагировать-kotlin-я бы создал
4. Запустите и дождитесь магии (она не работает). Оказывается, некоторые из них не скомпилировали предварительно настроенный веб-пакет, потому что он не был доступен во время компиляции. но IDE работал хорошо и даже обеспечил дополнение кода

Может кто-нибудь, пожалуйста, укажите мне направление?

Answer 1

Создание приложения реакции с использованием Gradle легко при использовании плагина внешнего интерфейса kotlin. В IntelliJ выполните следующие действия

Новый модуль> gradle > kotlin (Javascript) > [следующий, следующий, следующий... конец]

Вы должны будете настроить Gradle OfCourse (в зависимости от того, как вам это нравится).

Я настроил мой, как показано ниже:

buildscript {
    ext.kotlin_version = '1.2.41'
    ext.kotlinx_html_version = "0.6.4"
    ext.kotlin_frontend_version = "0.0.30"
    ext.react_version = "16.4.0-pre.31-kotlin-$kotlin_version"
    ext.react_dom_version = "16.4.0-pre.31-kotlin-$kotlin_version"
    repositories {
        mavenCentral()
        maven {
            url "https://dl.bintray.com/kotlin/kotlin-eap"
        }
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath "org.jetbrains.kotlin:kotlin-frontend-plugin:$kotlin_frontend_version"
    }
}
apply plugin: 'org.jetbrains.kotlin.frontend'
apply plugin: 'kotlin2js'
sourceCompatibility = 1.8
repositories {
    mavenLocal()
    mavenCentral()
    jcenter()
    maven { url "http://dl.bintray.com/kotlin/kotlin-dev" }
    maven { url "http://dl.bintray.com/kotlinx/kotlinx" }
    maven { url "http://dl.bintray.com/kotlin/kotlin-js-wrappers" }
}
dependencies {
    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    compile "org.jetbrains.kotlinx:kotlinx-html-js:$kotlinx_html_version"
    compile "org.jetbrains:kotlin-react:$react_version"
    compile "org.jetbrains:kotlin-react-dom:$react_dom_version"
}
kotlinFrontend {
    npm {
        dependency "style-loader" // production dependency
        dependency "react"
        dependency "react-dom"
        dependency "kotlin"
        dependency "@jetbrains/kotlin-extensions"
        dependency "@jetbrains/kotlin-react"
    }
    webpackBundle {
        bundleName = "main"
        sourceMapEnabled = false   // enable/disable source maps
        contentPath = file("${projectDir}/public") // a file that represents a directory to be served by dev server)
        publicPath = "/"  // web prefix
        host = "localhost" // dev server host
        port = 8088   // dev server port
        stats = "errors-only"  // log level
    }
}
task copyDocs(type: Copy) {
    println ":md-react:copyDocs: Copying to public directory"
    from("${projectDir}/build/bundle") {
        include "**/*.js"
        include "*.js"
    }
    into "${projectDir}/public/static"
    println ":md-react:copyDocs: Done copying"
}
task assembleWeb(type: Sync) {
    configurations.compile.each { File file ->
        from(zipTree(file.absolutePath), {
            includeEmptyDirs = false
            include { fileTreeElement ->
                def path = fileTreeElement.path
                (path.endsWith(".js") || path.endsWith(".map")) && (path.startsWith("META-INF/resources/") ||
                        !path.startsWith("META-INF/"))
            }
        })
    }
    from compileKotlin2Js.destinationDir
    into "${projectDir}/build/classes/main"
    dependsOn classes
}
//run.dependsOn copyDocs
assemble.dependsOn assembleWeb
copyDocs.dependsOn bundle
//assemble.finalizedBy(copyDocs)
compileKotlin2Js {
    kotlinOptions.outputFile = "${projectDir}/build/classes/main/web.js"
    kotlinOptions.moduleKind = "umd"
    kotlinOptions.sourceMap = true
}

Надеюсь, это поможет вам.

Счастливого взлома

Answer 2

Для тех, кто ищет более новое решение: с выпуском kotlin 1.4-M2 вы можете использовать мастер экспериментальных проектов Intellij Idea для создания полнофункционального веб-приложения с бэкэндом ktor и интерфейсом kotlin-react