example-rollup-react-component-npm-package

ExampleReact component "library" usingrollup that is published tonpm.

rollup andwebpack

There are a lot of articles that comparerollup andwebpack (likethis orthis orthis orthis).

The general point is

webpack is generally a better fit for applications, androllup is generally a better fit for libraries¹

So what is this project?

I've never usedrollup before - hell, I'vebarely usedwebpack before.

This was mostly to see how easy / difficult it was to create aReact component package usingrollup (aka "proof-of-concept").

My requirements for this package were

1. Usebabel
2. Usesemantic-release
3. Usesass
4. Supportumd andes modules
5. Usestorybook
6. Make the exported components really simple

My general thoughts

• Seemed pretty easy to get started withrollup
  • There area lot of plugins²
  • Pretty easy to specify output types (umd andes, for example)
  • Somerollup plugins didn't really play nicely withbabel@7 - which is why I downgraded to6 (I could definitely be messing something up)
• Not an easy way to plugstorybook in
  • It's weird and feels kind've gross becausestorybook is usingwebpack 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
  • Thetransitive-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"