Factor out core react-scripts functionality for library scaffolding

[taion]

cc @ryanflorence @ayrton @gaearon @jquense

This was intended as a dumb Twitter joke about "create-react-lib", but there's actually something to it.

Scaffolding React libraries hits the same point points as scaffolding React apps. However, in one way it's worse – library developers often have multiple library packages.

Getting a minimal library scaffolding up is pretty easy if you've done it a few times, but getting a good library scaffolding is time-consuming if you want to include all of:

• UMD build (unminified and minified)
• ES module build
• Coverage reporting on tests

It's just as difficult to keep stuff from going stale. I think I finally upgraded the last few of my libraries to Babel 6, but I'm not really sure, and it's a fair bit of work every time to make sure I remembered to set everything up appropriately. You can start a project by copying the last thing you did, but it's harder to keep stuff up-to-date.

Given that, it could be quite useful if some of the core functionality in react-scripts could be made reusable in such a way as to offer a "create-react-lib", where the main benefits would be:

• Reduce the amount of extra work required to get really good tooling set up
• Just update a dependency to freshen tooling dependencies

I haven't fully thought through how this would work, but I wanted to write this up real quick to lay out the pain points that I hope we can use functionality from here to resolve.

[ayrton]

I honestly think this idea is genius. Having a standard way to create libraries (designed specifically for react) will only encourage more people to contribute to the react eco system.

Getting started and having to figure out how to set up webpack, babel, builds for the first time is a time consuming job. Having gone through this process a couple times I think a standardised way of doing this would be fantastic. Having the same setup across several projects would also mean more people will be familiar to the setup.

But like you said Jimmy, I think the biggest gain most likely comes from ease of updating dev tool dependencies.

I'm happy to help out, let me know what I can do!

[insin]

This is one of the use cases nwb addresses, as I was having the same issue maintaining multiple component projects and keeping all the tooling and config up to date.

+1 for having an official create-react-lib

[insin]

Any thoughts on how this would in terms of modules? Should react-scripts gain the ability to scaffold out and provide tooling for a component/library or should there be a new module?

[gaearon]

I would imagine react-scripts could include more commands, like build-lib etc. We'd want to keep Babel configs the same, for example. But it's very hard to say until somebody makes a proof of concept.

[gaearon]

We don’t have any immediate plans to build this. If somebody wants to submit a proof of concept, they’re welcome to.

In the meantime we published our Babel preset and even some webpack utilities so it should be easier to build something like this separately. Jest configuration has also vastly simplified in the last couple of releases.

[jikkujose]

I wonder FB already should be having some solution to tackle this? I really wish to create a component library but the thought of having to set it all up makes me cringe & end up copy pasting the code. Now it has come to the point of becoming a pain.

[nileshgulia1]

We there at plone intend to make one of our project a react-scripts like library, so that with one command we can generate our boilerplate( we have our own) with the pre-configured tools. So for creating a library like react-scripts , do we use the same configuration settings and project layout as the scripts does ( env, polyfills, webpack )? Any suggestions are welcome.
cc @taion @gaearon @ayrton
Thanks

[antonybudianto]

I tried to make one:
https://github.com/antonybudianto/react-lib-scripts

Still new though, but works for simple React UI library