kotlin-frontend-plugin icon indicating copy to clipboard operation
kotlin-frontend-plugin copied to clipboard

Can not use bundlers with kotlin dsl

Open lex-em opened this issue 6 years ago • 4 comments

Hi! There is no way to use bundlers with kts at now:

kotlinFrontend {
    sourceMaps = true
    webpackBundle {
        bundleName = "main"
        sourceMapEnabled = true
        contentPath = file("$buildDir/bundle")
    }
}

Produce errors:

Script compilation errors:

  Line 36:     webpackBundle {
               ^ Unresolved reference: webpackBundle

  Line 37:         bundleName = "main"
                   ^ Unresolved reference: bundleName

  Line 38:         sourceMapEnabled = true
                   ^ Unresolved reference: sourceMapEnabled

  Line 39:         contentPath = file("$buildDir/bundle")
                   ^ Unresolved reference: contentPath

And there is no sutable bundle method! WebPackBundler does not implement BundleConfig:

    bundle<WebPackBundler>("webpack") {
        bundleName = "main"
        sourceMapEnabled = true
        contentPath = file("$buildDir/bundle")
    }

This does not work too:

    bundle<WebPackExtension>("webpack") {
        bundleName = "main"
        sourceMapEnabled = true
        contentPath = file("$buildDir/bundle")
    }

Becouse of configure is not generic C type:

    fun <C : BundleConfig> bundle(id: String, configure: BundleConfig.() -> Unit) {
        bundleBuilders += Pair(id, configure)
    }

lex-em avatar Jun 25 '18 05:06 lex-em

here some workaround, but its some ugly and not kotlin friendly :)

    bundle("webpack", delegateClosureOf<WebPackExtension> {
        bundleName = "main"
        sourceMapEnabled = true
        contentPath = file("$buildDir/bundle")
    })

lex-em avatar Jun 25 '18 05:06 lex-em

In addition: with workaround webpack does not generate js bundle: build.gradle.kts

import org.jetbrains.kotlin.gradle.frontend.webpack.WebPackExtension
import org.jetbrains.kotlin.gradle.tasks.Kotlin2JsCompile

plugins {
    kotlin("frontend")
}

version = "0.1.0-SNAPSHOT"

tasks {
    "compileKotlin2Js"(Kotlin2JsCompile::class) {
        kotlinOptions {
            moduleKind = "commonjs"
            metaInfo = true
            sourceMap = true
//            sourceMapEmbedSources = "always"
            outputFile = "build/classes/kotlin/main/index.js"
            main = "call"
        }
    }
    "copyResources"(Copy::class) {
        dependsOn("processResources")
        from("build/resources/main")
        into("build/bundle")
    }
    getByName("jar").dependsOn("copyResources")
    getByName("run").dependsOn("copyResources")
}


kotlinFrontend {
    sourceMaps = true
    npm {
        dependency("uuid", "^3.2.1")
        devDependency("webpack-cli")
        devDependency("webpack-dev-server")
        devDependency("webpack")
    }
    bundle("webpack", delegateClosureOf<WebPackExtension> {
        bundleName = "main"
        sourceMapEnabled = true
        contentPath = file("$buildDir/bundle")
    })
}

dependencies {
    "compile"(kotlin("stdlib-js"))
    "compile"(project(":web-js"))
    "testCompile"(kotlin("test-js", "1.2.50")) // TODO
}


error when call webpack-run, for some reason webpack.config.js is not generated:

webpack-dev-server exited with exit code 1, see /home/lex/projects/my/bb/kotlin-multimodule/ui/build/logs/webpack-dev-server.log
module.js:549
    throw err;
    ^

Error: Cannot find module '/home/lex/projects/my/bb/kotlin-multimodule/ui/build/webpack.config.js'
    at Function.Module._resolveFilename (module.js:547:15)
    at Function.Module._load (module.js:474:25)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/home/lex/projects/my/bb/kotlin-multimodule/ui/build/webpack-dev-server-run.js:25:14)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)

lex-em avatar Jun 25 '18 05:06 lex-em

I'm using it like that:

kotlinFrontend {
	bundle("webpack", delegateClosureOf<WebPackExtension> {
		bundleName = "Launcher"
		sourceMapEnabled = true
		port = 3000
		contentPath = file("../Assets/web")
		mode = "development"
		stats = "normal"
	})

	define("PRODUCTION", false)
	define("X", false)
}

neismit avatar Feb 28 '19 08:02 neismit

You can add an extension method somewhere

/**
 * Configures the [webpackBundle][org.jetbrains.kotlin.gradle.frontend.webpack.WebPackExtension] kotlin-frontend plugin extension.
 */
fun org.jetbrains.kotlin.gradle.frontend.KotlinFrontendExtension.`webpack`(
    configure: org.jetbrains.kotlin.gradle.frontend.webpack.WebPackExtension.() -> Unit
) {
    bundle("webpack", delegateClosureOf(configure))
}

and then use as expected

kotlinFrontend {
    npm {
        dependency("firebase")
    }

    webpack {
        bundleName = "main"
        contentPath = file("src/jsMain/web")
    }
}

Although I do agree that it should be available by default

semenoh avatar May 06 '19 18:05 semenoh