I’m compiling my code for react-native. Previously...

# javascript

[spierce7]

I’m compiling my code for react-native. Previously I’ve been using the DCE plugin to get all my js files all in one place, and to ship an app that is as small as possible.

It seems like the new direction for DCE is to use the browser target, but that compilation seems to run things through webpack. I don’t think I need webpack as react-native has it’s own bundler that I have to use (metro). What would be the best way to get DCE, all my js files in a single folder, and not have webpack process it?

[Sean Keane]

What compiler are you using?

[spierce7]

I’ll use whatever compiler I’m supposed to use. I’m on 1.3.72 right now, and I’m using the DCE plugin.

[Sean Keane]

Ah ok, so things changed in 1.3.72 and there is going to be a further change in 1.4, currently when you want to build with browser it can create a binary out into shared/build/distributions. But I think you can use the .jar unzipped to get the code that you want without the webpack config run on it. I think you can also set a webpack config file also or a webpack task in the browser config.

[Sean Keane]

Just checked, you should have a jar in the libs folder. You can unzip this to get the contents. I remember I had a script to do this on compiler 1.3.61, but in 1.3.72 they added the distribution file so this was no longer needed (But that file is run through webpack AFAIK).

[spierce7]

that seems weird though. I shouldn’t have to have a task unzip the jar should I?

[Sean Keane]

In the real world, no. It was the headache I had also. But my issue was EXACTLY the opposite of yours. I needed everything bundled together and published to NPM. This link gives more specs on how you might be able to get your webpack task to run with no changes. I havent looked too deep but it seems it might help. https://kotlinlang.org/docs/reference/js-project-setup.html#configuring-webpack-bundling

[spierce7]

if you need everything in one place, the current DCE plugin does a great job of that

[spierce7]

even if you don’t use it for DCE

[spierce7]

it puts all relevant js files in a single folder for you

[Sean Keane]

It does it even better in 1.4

[spierce7]

what does it even better in 1.4

[Sean Keane]

Creates the d.ts output also

[Ilya Goncharov [JB]]

I think, you need task processDceKotlinJs
It is available for browser subtarget
And further you can disable webpack tasks and remove dependency from build task on webpack ’s ones

[spierce7]

@ilya.gorbunov Thanks - I’ll look into that

[spierce7]

@ilya.gorbunov How do I disable the webpack task?

[spierce7]

and remove the dependency from build as you mentioned?

[Ilya Goncharov [JB]]

Pay attention please, that you mentioned wrong person 🙂
For example you can do this

tasks.named("browserProductionWebpack") {
    enabled = false
}

[spierce7]

@Ilya Goncharov [JB] oops my bad. How do I remove the dependency from the build task? I’m trying to understand all the pieces you are saying. Something like this should work to disable all the webpack tasks:

tasks.forEach {
    if (it.name.contains("webpack", ignoreCase = true)) {
        it.enabled = false
    }
}

[spierce7]

oh - it appears there is also a

browser {
    webpackTask { 
        enabled = false
    }
}

[Ilya Goncharov [JB]]

In fact, I am not sure that it is actual for Gradle 6.0
In earlier versions you can

tasks.named("build") {
   dependsOn.remove("browserProductionWebpack")
}

But seems that this behaviour is not supported in Gradle >6.0

[spierce7]

using this approach seems to be working, I’m just not getting a source-map anymore for the lib, but I am for kotlin.js

[spierce7]

any idea how to enable source maps for the provided module that’s being compiled?

[spierce7]

@Ilya Goncharov [JB] This no longer seems to work:

tasks.withType(org.jetbrains.kotlin.gradle.dsl.KotlinJsCompile::class) {
    kotlinOptions {
        sourceMap = true
        metaInfo = false
    }
}

[Ilya Goncharov [JB]]

By default sourceMap = true
Could you try wuth configureEach?

tasks.withType(org.jetbrains.kotlin.gradle.dsl.KotlinJsCompile::class).configureEach {
    kotlinOptions {
        sourceMap = true
        metaInfo = false
    }
}

[spierce7]

doesn’t work

[spierce7]

same result

[spierce7]

My full build file:

plugins {
    kotlin("js")
}

val outputDir = "$rootDir/../example/lib"

kotlin {
    target {
        useCommonJs()
        browser {
            webpackTask {
                enabled = false
            }
            dceTask {
                dceOptions {
                    outputDirectory = outputDir
                }
            }
        }
    }

    sourceSets {
        val main by getting {
            dependencies {
                implementation(Deps.kotlin.stdlib.js)
            }
        }
        val test by getting {
            dependencies {
                implementation(Deps.kotlin.test.js)
            }
        }
    }
}

tasks.withType(org.jetbrains.kotlin.gradle.dsl.KotlinJsCompile::class).configureEach {
    kotlinOptions {
        sourceMap = true
        metaInfo = false
    }
}

tasks.findByName("clean")!!.apply {
    doFirst {
        delete(outputDir)
    }
    doLast {
        File(outputDir).mkdirs()
    }
}

[spierce7]

@Ilya Goncharov [JB]

[Ilya Goncharov [JB]]

And you have no source maps in build/js/packages/module-name/kotlin?

[spierce7]

@Ilya Goncharov [JB] oh… It’s there

[spierce7]

Filed 2 tickets around this:
https://youtrack.jetbrains.com/issue/KT-38824
https://youtrack.jetbrains.com/issue/KT-38825

[Ilya Goncharov [JB]]

Thank you!
Don’t you have source maps in DCE output? I have in my sample.