|
1 |
| -# example-react-component-npm-package |
2 |
| -Example React Component, Published to npm |
| 1 | +# example-rollup-react-component-npm-package |
| 2 | + |
| 3 | +Example `React` component "library" using [`rollup`](https://github.com/rollup/rollup) that is published to `npm`. |
| 4 | + |
| 5 | +## `rollup` and `webpack` |
| 6 | + |
| 7 | +There are a lot of articles that compare `rollup` and `webpack` (like [this](https://medium.com/webpack/webpack-and-rollup-the-same-but-different-a41ad427058c) or [this](https://webpack.js.org/comparison/) or [this](https://stackoverflow.com/a/43255948/5225575) or [this](https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/)). |
| 8 | + |
| 9 | +The general point is |
| 10 | +> `webpack` is generally a better fit for applications, and `rollup` is generally a better fit for libraries |
| 11 | +<sup>[1](#general-footnote)</sup> |
| 12 | +
|
| 13 | +## So what is this project? |
| 14 | + |
| 15 | +I've never used `rollup` before - hell, I've *barely* used `webpack` before. |
| 16 | + |
| 17 | +This was mostly to see how easy / difficult it was to create a `React` component package using `rollup` (aka "proof-of-concept"). |
| 18 | + |
| 19 | +My requirements for this package were |
| 20 | + |
| 21 | +1. Use `babel` |
| 22 | +2. Use `semantic-release` |
| 23 | +3. Use `sass` |
| 24 | +4. Support `umd` and `es` modules |
| 25 | +5. Use `storybook` |
| 26 | +6. Make the exported components really simple |
| 27 | + |
| 28 | +## My general thoughts |
| 29 | + |
| 30 | +* Seemed pretty easy to get started with `rollup` |
| 31 | + * There are **a lot of plugins** <sup>[2](#metric-fuck-ton-footnote)</sup> |
| 32 | + * Pretty easy to specify output types (`umd` and `es`, for example) |
| 33 | + * 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) |
| 34 | +* Not an easy way to plug `storybook` in |
| 35 | + * It's weird and feels kind've gross because `storybook` is using `webpack` to build 😬 |
| 36 | +* Articles that were helpful |
| 37 | + * [`rollup` Guide](https://rollupjs.org/guide/en) |
| 38 | + * [How I Set Up a React Component Library with Rollup](https://medium.com/tech-grandata-com/how-i-set-up-a-react-component-library-with-rollup-be6ccb700333) |
| 39 | + * [Publishing Baller React Modules](https://hackernoon.com/publishing-baller-react-modules-2b039d84bce7) <sup>[3](#baller-react-modules-footnote)</sup> |
| 40 | + * [Making of a Component Library for React](https://hackernoon.com/making-of-a-component-library-for-react-e6421ea4e6c7) |
| 41 | + * The [`transitive-bullshit/create-react-library`](https://github.com/transitive-bullshit/create-react-library) was also very useful to inspect |
| 42 | + |
| 43 | +## Footnotes |
| 44 | + |
| 45 | +<ul> |
| 46 | + <li><a name="general-footnote"><sup>1</sup></a>general general general general general. In general, I could do this all day.</li> |
| 47 | + <li><a name="metric-fuck-ton-footnote"><sup>2</sup></a><a href="https://github.com/rollup/rollup/wiki/Plugins">Like a metric fuck ton of plugins</a></li> |
| 48 | + <li><a name="baller-react-modules-footnote"><sup>3</sup></a><a href="https://media.giphy.com/media/oOTTyHRHj0HYY/giphy.gif">How I feel about "baller"</a></li> |
| 49 | +</ul> |
0 commit comments