example-rollup-react-component-npm-package

example-rollup-react-component-npm-package

Example React component "library" using rollup that is published to npm.

rollup and webpack

There are a lot of articles that compare rollup and webpack (like this or this or this or this).

The general point is

webpack is generally a better fit for applications, and rollup is generally a better fit for libraries ¹

So what is this project?

I've never used rollup before - hell, I've barely used webpack before.

This was mostly to see how easy / difficult it was to create a React component package using rollup (aka "proof-of-concept").

My requirements for this package were

1. Use babel
2. Use semantic-release
3. Use sass
4. Support umd and es modules
5. Use storybook
6. Make the exported components really simple

My general thoughts

• Seemed pretty easy to get started with rollup
  • There are a lot of plugins ²
  • Pretty easy to specify output types (umd and es, for example)
  • Some rollup plugins didn't really play nicely with babel@7 - which is why I downgraded to 6 (I could definitely be messing something up)
• Not an easy way to plug storybook in
  • It's weird and feels kind've gross because storybook is using webpack to build 😬
• Articles that were helpful
  • rollup Guide
  • How I Set Up a React Component Library with Rollup
  • Publishing Baller React Modules ³
  • Making of a Component Library for React
  • The transitive-bullshit/create-react-library was also very useful to inspect

Footnotes

• ¹general general general general general. In general, I could do this all day.
• ²Like a metric fuck ton of plugins
• ³How I feel about "baller"