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