https://kotlinlang.org logo
Channels
Powered by
#multiplatform
Title
# multiplatform
g

Gunslingor

03/20/2020, 5:23 PM
What is wrong with my webpack multiplatform project code, I don't think the dependcies like three.js are getting packed.
Copy code
js("frontend") {
    browser {
        tasks {
            register<Exec>("webpack") {
                dependsOn("yarn", "npmInstall")
                //outputs.dir("$buildDir\\yyy\\")

                commandLine("$buildDir\\js\\node_modules\\.bin\\webpack", "$buildDir\\js\\packages_imported\\kotlin\\1.3.70\\kotlin.js", "$buildDir\\js\\packages_imported\\three.js\\71.0.0-r\\three.js")
                //, "$buildDir\\js\\packages_imported\\kotlin\\1.3.70\\kotlin.js", "$buildDir\\js\\packages_imported\\three.js\\71.0.0-r\\three.js"
            }
        }
    }
}
r

Robert Jaros

03/20/2020, 5:31 PM
why do you use three.js from webjars instead of npm dependency?
implementation(npm("three.js"))
should work without all this configuration options
g

Gunslingor

03/20/2020, 5:35 PM
I actually tried that with adding three to
Copy code
dependsOn("yarn", "npmInstall")
I think it worked to download them. to be honest I'm not comfortable with node most out of all these technologies even the new multiplatform stuff. I actually can't seem to comprehend how I should/want-to use it... ktor seems fine but I don't understand how I would use it with node.js if I'm using Kotlin JS... nodes purpose is to write server side in javascript, Kotlin JS's purpose is to avoid JS alltogether IMHO and ktor has its own services and framework. Bottom line I'm trying to setup the architecture of a full stack Kotlin (mostly/only) project using ktor and node SEEMS to be a requirement? I've been struggling with all this stuff.. could use a code review... and a tutor =)
r

Robert Jaros

03/20/2020, 5:38 PM
yarn, npm and webpack all work with nodejs, to it is a requirement
but it's hidden under the gradle tasks
g

Gunslingor

03/20/2020, 5:40 PM
it seems to take me 30 hours to solve each gradle issue I stumble over... I've been trying to make a webpack for a week now... I could've done it manually by now, lol
I need ktor to server it up... ktor is serving up the project js file in distributions but I don't think it has three.js or other dependancies in it
Also really confused about Soooo many files and folders in the build dir; I've learned what a lot of this stuff is and suspect the majority of it shouldn't end up in customer facing software... so what's the process of taking all this stuff in the build dir and turning it into customer facing software packages, installation packages, server/client side versions, etc...
r

Robert Jaros

03/20/2020, 5:52 PM
this is one of the simple examples of multiplatform projects with ktor on the backend: https://github.com/hannespernpeintner/kotlin-minimal-jvm-js
you can also look at kvision ktor template (but it's more complicated because of additional build tasks): https://github.com/rjaros/kvision-examples/tree/master/template-fullstack-ktor
imho you should definitely go back to 
npm()
dependency and use what is already implemented in kotlin/js plugin
g

Gunslingor

03/20/2020, 5:55 PM
Thank you, I ment to look into kvision and I haven't seen that example, thought I saw them all by now, lol. Can you confirm that my webpack out doesn't contain the dependancies? I don't know for sure, just based on webpack.config.evaluated.js and I served the output for three and didn't see the keyword anywhere
Wow, that's you on the bottom on the page, what are the odd! https://dev.to/rjaros/an-introduction-to-kvision-39i1
Copy code
js("frontend") {
    browser {
        nodejs {
            webpackTask {
                println("WEBPACKAGINGss")
                configure<> {  }
            }
        }/
    }
}
I'm getting close with this I suspect... I think you need a webpack.config.js file to make this work traditionally, but that gets generated by gradle when it creates node so there has to be a way to configure it in gradle like this right?
r

Robert Jaros

03/20/2020, 8:46 PM
you can add some 
*.js
files to 
webpack.config.d
directory - their content will be added to the generated 
webpack.config.js
file
g

Gunslingor

03/20/2020, 8:47 PM
But those files are already in node_modules. I'd prefer to do this without another root dir or root file
r

Robert Jaros

03/20/2020, 8:51 PM
That's the way to configure webpack at the moment. I don't think there is an alternative way.
g

Gunslingor

03/20/2020, 8:52 PM
I'm able to
Copy code
setProperty("mode", "development")
and it propagates to the gradle created js/packages/project/webpack.config.js file, but I can't fiugure out how to make it modify the resolve.modules object which I suspect is what is needed to make this work... it seems to default to ["node_modules"] which does have everything... hmmm, maybe I just need to add an entry object somehow
Copy code
js("frontend") {
    browser {
        nodejs {
            webpackTask {
                println("WEBPACKAGINGss")
                setProperty("mode", "development")
                setProperty("resolve") {
                    setProperty("modules", {"TEST"})
                }
                configure<Entry> {  }
            }
        }
    }
}
the experiuments
Copy code
// resolve modules
config.resolve.modules.unshift("C:\\Users\\gunsl\\IdeaProjects\\FL\\build\\js\\packages\\FL-frontend\\kotlin-dce")
config.resolve.modules.unshift("C:\\Users\\gunsl\\IdeaProjects\\FL\\build\\js\\packages_imported")
Is this right?
So this is wierd, I decided to go around the problem for a little while and start programming with three.js, so I downloaded and attempted to start using three-js-wrapper project... guess what, the wrapper seems to do fine... makes it to the dce folder and the final webpack but the webpack is STILL missing three.js.
I'm starting to think it has something to do with the . in three.js; thats the only distinction I see between it and other packages.
2 Views
Powered by