Move more things to react-dev-utils

[ForbesLindesay]

I want to make react-scripts easier to fork/extend. I think the way to do that is to move as much as possible into react-dev-utils so that react-scripts can be a smaller package that changes less frequently. Then you can always just update the react-dev-utils to get most new features in react-scripts.

This should also make ejecting much less painful, as ejected projects still depend on react-dev-utils

My proposal is to move:

1. config/webpackDevServer.config.js - This can just take publicPath and appPublic as additional options
2. config/polyfills.js - this can just be moved as is - do we want to include it in what gets ejected still, or just reference it from react-dev-utils? I feel like just referencing it probably makes the most sense.
3. config/env.js - This will need to take dotenvPath as an argument, and delete require.cache[require.resolve('./paths')]; will have to be done elsewhere.
4. each of the three jest transforms - these can just be moved as is, and then they won't need to be ejected either.
5. scripts/utils/createJestConfig.js - this will just need to take paths.testsSetup and paths.appPackageJson as arguments.

I then think we should add a pathUtils module in react-dev-utils, containing resolveApp, getPublicUrl, getServedPath and resolveOwn. This should simplify config/paths.js quite a bit.

At this point, I think we should re-evaluate what else needs moving. If nobody objects, I'll start submitting pull requests for these changes.

[gaearon]

Sounds good, but I want to keep user in control of webpack configs (and probably DevServer config?) so it’s easy to modify them explicitly.

[ForbesLindesay]

You mean, once ejected? I see a few options:

1. We could still eject the DevServer config.
2. We could add an eject dev-server-config command that can only be run on an already-ejected app, and simply copies webpackDevServer.config.js config into ./config/webpackDevServer.config.js and updates the reference in scripts/start.js.
3. We could add a comment on the relevant line of scripts/start.js explaining that you can copy the file from react-dev-utils/webpackDevServer.config.js?

Option 1 would be consistent with what we do at the moment, but is a bit of a shame as it means users who eject never get updates to webpackDevServerConfig.js

Option 2 will be the most work to build/maintain, but I think is probably the nicest experience.

Option 3 would be very easy, but does add more work for the user if they decide they want to fork webpackDevServer.config.js

[ro-savage]

People who maintain forks of react-scripts to add additional features often edit webpackDevServer.config.js to add features such as CSS Modules, TypeScript etc.

Keeping it in react-scripts is certainly the best option for us.

I've also edited polyfills.js before but that could be done somewhere else in the app itself.

[gaearon]

Just to set expectations, we’re a little busy with some other things and it will take me a little while to get back to this.

[ForbesLindesay]

We can add lots of options to the function that returns webpackDevServerConfig, so that it needs forking less frequently. You can also always mutate the object returned. If you do need to fork it completely, you can still just copy it and edit it.

Thanks for letting me know what to expect @gaearon