Originally posted on my blog.
Front-End development has become extremely interesting and fun to do with the beginning of the ECMAScript and NPM ...
For further actions, you may consider blocking this person and/or reporting abuse
lodash
exports as CommonJS (via UMD), so there's no need to configure rollup to grab it offwindow
... unless you're demonstrating how this can be done, and if that's the case, it might be helpful to point out that's why you did what you did and that normally (i.e. most modern packages) you'd justnpm / yarn install
your package and not have to muck with your bundler config at all.Also, no need to install all of lodash and blow up your bundle size with all its functions if you're just going to use a couple of functions from it; e.g.
lodash.concat
and all the other lodash functions are published individually.But then again, why use
_.concat
at all when your browser can already concat arrays pretty well without a library?Hi,
note that commonjs must be invoked before babel.
"When using @rollup/plugin-babel with @rollup/plugin-commonjs in the same Rollup configuration, it's important to note that @rollup/plugin-commonjs must be placed before this plugin in the plugins array for the two to work together properly."
github.com/rollup/plugins/tree/mas...
I'm confused, I don't see how to include the global css file (from .scss). I have a "main.scss" file that imports a bunch of helper scss files (colors, typogrpahy) etc.. and I want to bundle "main.scss" and have it in my main page so all my components get the "base" styles. I went to the other link (rollup cheatsheet) but I am not seeing you include a global.css file anywhere.. I"m confused as to where the solution is for installing a global css file.
I'm confused why you think the post is supposed to teach you how to configure rollup to bundle your css files... and why were you working with css files as late as October of 2020? en.wikipedia.org/wiki/CSS-in-JS
Good :)
Thanks 😊
hope to see the next article, and can you include multi input configure and css/less/sass html files import
Hi, I didn't post it on dev.to, but I've created a rollup cheat sheet that includes the CSS handling. You can check it out here. It's a shortened version of this post and, as an addition, it includes the CSS configuration.
Regarding the HTML, you can see the plugin in action on this repo.
Sure, will include css/sass/html combination.
A year later, but still very useful article. Thanks a lot
No problem :)
Your IIFE output config doesn't work since the IIFE format also requires the
name
option to be set.Yes, I didn't update the article, but it's updated here though.
I will update this one too. Thanks for pointing out. In earlier versions, the name wasn't required.
EDIT: The
name
has been added to theoutput
objectNice one mate, awesome article :)
Thanks! Glad you find it useful
how run development mode by rollup?
Awesome write up. Exactly what I was looking for!