How should I be getting all my kotlin-js compiled files, my kotlin dependency outputs, and my npm li...

# javascript

[spierce7]

How should I be getting all my kotlin-js compiled files, my kotlin dependency outputs, and my npm libraries all in one place? I used to use the dce plugin, but that doesn’t seem to work with the declared npm dependencies. Surely I’m overlooking something

[Kabbura]

Have you migrated to the new gradle plugin org.jetbrains.kotlin.js instead of 'org.jetbrains.kotlin.frontend'
and 'kotlin2js'?

[spierce7]

yes

[spierce7]

Ideally I think I’d pack things into a single file. I’m not sure exactly what firebase is doing or how it works. There are other options

[Kabbura]

I am not exactly sure what you mean cause the dce plugin is used to eliminate dead code not pack everything into a single file. That's what webpack does (with or without the dce plugin).

[Kabbura]

My build.gradle looks as follows

buildscript {
    ext.kotlin_version = '1.3.61'
    ext.coroutines_version = '1.0.1'

    repositories {
        jcenter()
        maven {
            url "<https://dl.bintray.com/kotlin/kotlin-eap>"
        }
    }
    dependencies {
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
    }
}


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

group 'com.narbase'
version '1.0-SNAPSHOT'


repositories {
    mavenCentral()
    jcenter()
}

dependencies {
    compile "org.jetbrains.kotlin:kotlin-stdlib-js:$kotlin_version"
    compile "org.jetbrains.kotlin:kotlin-test-js:$kotlin_version"
    compile "org.jetbrains.kotlinx:kotlinx-coroutines-core-js:$coroutines_version"
    compile 'com.narbase:kunafa:0.2.12'
}

kotlin {
    sourceSets {
        main {
            dependencies {
                implementation npm('material-design-icons-iconfont', '5.0.1')
                implementation npm('css-loader', '3.4.2')
                implementation npm('style-loader', '1.1.3')
                implementation npm('file-loader', '5.0.2')
                implementation npm('typeface-open-sans', '0.0.75')
                implementation npm('tippy.js', '4.3.4')
                implementation npm('flatpickr', '4.6.3')
            }
        }
    }
    target {
        browser {
            runTask {
                outputFileName = "main.bundle.js"
            }
        }
        compilations.all {
            kotlinOptions {
                sourceMap = true
                sourceMapEmbedSources = "always"
            }
        }
    }
}

[Kabbura]

Then everything is bundled into main.bundle.js file that I import in index.html

[spierce7]

@Kabbura How is everything bundled together? What gradle command do you use?

[gbaldeck]

are you using Intellij? If so open up the gradle panel on the right. There should be a buildJs or buidWebpackBundle task there or something similar. Can't remember the exact task name

[gbaldeck]

It uses webpack under the covers to do the bundling

[Kabbura]

@spierce7 I build it from the command line with ./gradlew build and run it with ./gradlew run -t

[spierce7]

I tried the build command. I'm getting a different format

[spierce7]

Probably because of nodejs.