DEV Community

How To Setup Rollup Config

Milos Protic on April 18, 2019

Originally posted on my blog. Front-End development has become extremely interesting and fun to do with the beginning of the ECMAScript and NPM ...

Read full post

Thomas Hallock • Sep 17 '21

lodash exports as CommonJS (via UMD), so there's no need to configure rollup to grab it off window... 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 just npm / 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?

djibe • Apr 3 '21

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...

Hello • Oct 14 '20

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.

Thomas Hallock • Sep 17 '21 • Edited

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

UDI • Jul 3 '19

Good :)

Milos Protic • Jul 3 '19

Thanks 😊

Wzh • May 16 '19 • Edited

hope to see the next article, and can you include multi input configure and css/less/sass html files import

Milos Protic • Jul 4 '19

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.