Package components as ES6 classes

miukimiu / react-kawaii

Cute SVG React Components

https://react-kawaii.vercel.app/

MIT License

2.91k stars 104 forks source link

Package components as ES6 classes #45

Closed ZhangYiJiang closed 5 years ago

ZhangYiJiang commented 5 years ago

Currently because of the way this library is packaged as UMD, importing any component from the library will cause the all components to be imported. It would be great if the components can also be built as ES6 and made available under the modules entry point in package.json so that ES6 aware bundlers can shake away unused components.

miukimiu commented 5 years ago

Hello @ZhangYiJiang,

Do you know how to do that? Do you want to do a PR?

Thanks!

ZhangYiJiang commented 5 years ago

I've not done it before, but I've seen it done using Rollup. I don't have time this week, unfortunately, but I can take a look maybe this or next weekend

ZhangYiJiang commented 5 years ago

I gave this a try yesterday. A few things I've found

This package uses Webpack, but only Rollup supports ES6 export target. Webpack 5 may support ES6 as a target, but this package is only on Webpack 2. This means either switching to Rollup entirely, or maintaining two different build systems, both of which are annoying options
While the results from using Rollup looks correct, when imported Webpack still does not appear to do tree shaking, ie. the entire file is included instead of just the components used. This is very annoying, but I can try investigating further

miukimiu commented 5 years ago

Hi @ZhangYiJiang,

Thanks for your all help! I've just updated some dependencies and now the project is using webpack 4.27. Not sure if this can be helpful.

I don't mind to have two different build systems.