primers

With create-react-app, if you want to change some configuration, one way is to use the eject directive, but then you might not be able to synchronize subsequent updates. The other option is to override the corresponding configuration using react-app-rewired, which is somewhat difficult to set up. A better approach is to make custom changes directly based on the original build script and to synchronize subsequent updates.

Introduction to the

Create-react-app contains several different libraries managed using Lerna. The relevant scripts for the build are mainly in React-scripts. You can Fork your own version or sync the official version.

operation

1 Fork

Log in to GitHub and Fork create-react-app. See Fork a repo for more details.

2 Modify the corresponding library

After Fork, clone the corresponding library to local. Before making changes, it is recommended to create your own change branch based on the published branch. As an example, add some print logs to /packages/react-scripts/scripts/init.js.

3 distribution package

As the package is forked, some description of package.json needs to be modified. At the very least, the name field in it needs to be changed; the example name is customize-react-scripts. For other information, determine whether to modify it based on the actual situation.

npm login
npm publish
Copy the code

Release package details are available here.

4 Use the customized package

After the publishing is successful, go to a directory and run the following command:

npx create-react-app test-app --scripts-version customize-react-scripts
Copy the code

You can see the following information.

After the installation is successful, you can view the added information.

The resources

  • Alternatives to Ejecting
  • Customizing create-react-app: How to Make Your Own Template

Recently played a small game “full moon night”, in the face of little Red Riding hood story rewriting quite interesting. Each investigation boss has a different Angle of rewrite.