Is there anyway to lock the package.json? Apparent...
# javascript
r
Is there anyway to lock the package.json? Apparently Terser put out an update a few hours ago that well… does that ^ (see above post) https://github.com/terser/terser/issues/624
n
Hmm.. Yeah that looks like it's the thing.. I'm not actually sure how you add a package.json to a kotlin mpp project, do you?
r
its generated by the kotlin plugin, which includes all the webpack stuff + any npm dependenies you add to the gradle dependency sections
I’m not sure if you can override the versions of the dependencies the plugin requires
n
yeah, looking into that, I see previous posts that hint that you can
l
Not sure if this is what you meant by 'lock package.json' but you are able to specify the package version in the build.gradle.
Copy code
implementation(npm("package", "verson"))
That's syntax is for a kotlin DSL build.gradle file.
n
Yeah, I'm using kotlin dsl in a MPP project
r
Yeah I’m not sure if you can override the plugin modules with that dsl style. At least I’ve not had any luck yet and I’ve run into problems trying to specify stuff that the kotlin plugin relies on (like webpack bits).
l
I am not familiar with terser, so I cannot be much help on that front. Another option available to you if you are not aware is to modify the webpack config by dropping a "webpack.config.d" directory in the root and putting a config file that will get appended to the kotlin generated one. Ref: https://kotlinlang.org/docs/reference/js-project-setup.html#configuring-webpack-bundling
Copy code
config.module.rules.push({
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
})
r
terser is part of the production optimizations built into webpack when compiling for the browser
yadda yadda yadda its automatically included, its breaking now, people who build clean will automagically pull in the new version and it breaks
n
fun times 😛
l
I see, forgive my ignorance. That's frustrating.
r
You can replace Terser with UglifyJS plugin (using *.js file in webpack.config.d). It gives very similar results.
n
Robert, any examples of that?
n
I'm pretty new to webpack -- how does kotlin js compiler know to use minify.js? Is it just *.js files get rules appended?
r
you will need also
implementation(npm("uglifyjs-webpack-plugin", "2.2.0"))
kotlin just generates webpack config file
👍 2
r
webpack has lots of systems (its super powerful!) but for the most part you can summarize the kotlin support as “the plugin has a preconfiguration for webpack”
r
Terser is the default optimizer in webpack, so it's used when no other is configured
n
holy cow, that worked!
You guys are the best 🙂
And bonus - uglify is giving me about 15% smaller filesize than what terser was giving
One thing I'm scratching my head over though -- This is for a webgl / opengl framework I'm writing and I don't know how I'd have control over the webpack.config.d folder via a plugin. I can add that folder to the templates, but I don't have any ability to control the default minimizer this way
r
I would assume your library doesn’t really want to dictate to its consumers how they should be packing their apps
and this current issue should be temporary
n
I'd like to give them a default that's at least not broken 😛
r
hehe
hopefully both the terser peeps and the kotlin peeps have workarounds - it definitely seems unintended that the plugin’s npm dependencies auto-update but appear to have no manual overrides (I’m still looking into this part, with not much success)
n
Is there a way to add a yarn lock file or something?
I'm considering adding a webpack.config.d folder to the new project template -- it's useful to know that at least exists, I think most users wouldn't have any idea this magic folder is a thing. I've used it before but there isn't much documentation about it.
r
the plugin generates one, I haven’t seen any official recommendation regarding it. Its in the build folder. I suspect it gets mucked with a lot.
n
Ok, so I got it working with Terser as well with:
Copy code
implementation(npm("terser", "4.6.7"))
It just needs to be on every library, not just the application
r
ick
well done
n
no seriously, thank you. That would have burned a whole day otehrwise
r
yeah i’d been burning about 35 minutes before i found that Terser issue. I’m sure there are still others banging their heads against it
n
I'll add the two solutions to the first post for posterity
👍 1
r
sidenote: i did figure out how to change the versions of the npm utils the kotlin js plugin requires (by configuring NodeJsRootExtension)… it doesn’t look intentional however. And it is severely limited to the modules they’ve already enumerated (which does not include things like terser)
n
well, terser might be transient - I'm guessing that the ^4.1.2 version of terser coming from the terser webpack plugin which is coming from webpack 4.41.2?
r
it def is
(insert rant about this is why lock files exist here 😉)
n
ha, well we know there's a generated lock file but that doesn't mean we can't supply a lock file. I just haven't seen any docs about that
goin for a walk, hoping not to catch corona 😛
r
gl
b
Add ignore exclusion to gitignore for build/yarn.lock
👍 1
r
@Big Chungus Do you know if that’s intended by the plugin authors? It looks like the yarn.lock is removed on gradle clean. 😅
b
Yes, it should be generated outside of/build dir i think. But currently we have to resort to workarounds
👍 1
Or just specify versions explicitly in gradle