Create-React-Scripts — create your own react-scripts without fork

If you are familiar with React, you must have heard of create-react-app announced by Facebook.

create-react-app is great, you don’t have to worry about the babel and webpack configuration before you start learning React. Its a good tool for React beginner.

How about experienced user?

All the configuration are hidden by create-react-app.
Configurations are put inside the sub package called react-scripts.

How can we modify the configuration hidden by create-react-app?

Eject

create-react-app provides an official way to do that, which is react-scripts eject. By doing this way, it means that you cannot enjoy any benefit `create-react-app` will provide in the future. You have to maintain the configuration yourself and you may need to keep track of the updates from create-react-app.

Fork

Another way to extend the configuration is using a Fork of `create-react-app`. By doing this way, its just better, it would be *easier* to keep track of the updates from `create-react-app`. But… you still need to maintain the fork repository yourself. Is it worth to maintain the whole repository if you only need some modification on the configuration like *sass* and *less* supports?

React App Rewired

react-app-rewired is a module that you can easily extends the webpack and babel configuration by using config.override.js. But the config.override.js must be along with your project, and it is hard to share your configuration to your teammates as you cannot publish the modification into another version of react-script.

Roll Your Own Boilerplate

If you choose this way, then you don’t even need create-react-app. But as a experienced user, setup webpack and babel configuration is a time consuming tasks. create-react-app is an official tool, I believe the choice she taken is good reference. Usually we only want to extend the configuration instead of completely rewrite.

All of the above are not good enough if we want to publish our own version of react-scripts.

That’s why I create ‘create-react-scripts’

Create React Scripts

No Perfect Configurations Unless You Create Your Own

This module helps you easily extend the react-scripts to your own version of react-scripts.

Reference Issue

https://github.com/facebookincubator/create-react-app/issues/3190

Design Goals

+ Easy to create your own react-scripts by just a simple configuration
+ Support similar way like what react-app-rewired did to modify the configuration
+ Able to customize script like building script build:server and start:server to support universal rendering
+ Compose-able react-scripts

How it works?

The working principle is similar to what react-app-rewired did. This module make use of replacement of require.cache.

This method would be broken if the implementation or location of following files changed.
+ react-scripts/config/paths.js
+ react-scripts/config/env.js
+ react-scripts/config/webpack.config.dev.js
+ react-scripts/config/webpack.config.prod.js
+ react-scripts/config/webpackDevServer.config.js
+ react-scripts/scripts/util/createJestConfig.js

All the above are pre-required and the require.cache got replaced according to your setting in crs.config.js.

To understand more, please checkout https://github.com/raymondsze/create-react-scripts

And all sub-packages
https://github.com/raymondsze/create-react-scripts/tree/master/packages