Create-react-app is a common scaffolding used to create react projects. Its design concept and implementation ideas are worth learning. I researched the create-React-app source code and sorted out its core functional modules.

Here are the main points of the article:

1. Introduce how to use create-React-app

2. Introduce the create-react-app process. How does create-react-app create a React project

3. The implementation of three core modules of Create-React app is analyzed in detail

4. To summarize

Create-react-app quick start

Create project my-app with create-react-app:

npx create-react-app my-app
Copy the code

2. Go to the my-app folder and run the NPM start command to start the project

The default readers of this article are those who have been exposed to create-react-app, so we will not give an in-depth description of how to use create-react-app. For more details, please read the official document (👉 create-react-app).

You’re supposed to know

To better understand the internal implementation of create-React-app, we need to know the following:

1. Monorepo management

concept

Monorepo is a solution for managing project code by managing multiple modules/packages in a project repository (REPO). The advantage of Monorepo is that a warehouse maintains multiple modules, can unify workflow, code sharing.

Create-react-app maintains 11 packages under Packages using the Monorepo scheme. These packages are related to each other and maintained in a repository for easy code management. This idea is also worth learning and applying at work.

. ├ ─ ─ the Babel - plugin - named - asset - the import ├ ─ ─ the Babel - preset - react - app ├ ─ ─ confusing - browser - globals ├ ─ ─ cra - template ├ ─ ─ Cra - the template - typescript ├ ─ ─ the create - react - app ├ ─ ─ eslint - config - react - app ├ ─ ─ the react - app - polyfill ├ ─ ─ the react - dev - utils ├ ─ ─ The react - error - overlay └ ─ ─ the react - scriptsCopy the code

use

We can use Lerna or Yarn Workspace to implement the Monorepo solution. Here is how LERna builds the basic Monorepo repository:

1. Go to the project directory and create a lerNA managed warehouse

lerna init
Copy the code

2. Add a package

lerna create my-package
Copy the code

3. Release packages. Prompt for a new version and update all packages on Github and NPM.

lerna publish
Copy the code

4. Install all packages dependencies to root node_modules.

lerna bootstrap
Copy the code

For details, please visit 👉 Lerna’s official website

2. Required node modules

commander

Commander is a complete Node.js command-line solution that encapsulates command line commands

  • .versionThe -v and –version methods can be set by default
  • through.argumentsYou can specify parameters for the topmost command, and for subcommands, parameters are included in the command call. Brackets indicate required (eg.) and square brackets (eg. [optional]) indicate optional.
  • through.usageOption to modify the first line prompt of the help message

Run create-react-app myApp op1, where myApp is mandatory but op1 is not

const chalk = require('chalk'); const {Command} = require('commander'); The new Command (' the create - react - app.) version (' 1.0.0). The arguments (' [optional] '). The usage (` ${chalk. Green (' ')} [optional] `) .action((must,optional,... args) => { console.log(must,optional,args); }) .parse(process.argv);Copy the code

cross-spawn

  • Cross-spawn is a cross-platform solution of Spawn and spawnSync for Node
  • Inherit means to pass the corresponding STDIO to or from the parent process
const spawn = require('cross-spawn'); const child = spawn('node', ['script.js','one','two','three'], { stdio: 'inherit' }); child.on('close',()=>{ console.log('child is done! '); }); const result = spawn.sync('node', ['script.js','one','two','three'], { stdio: 'inherit' }); console.log(result);Copy the code

Create-react-app modules are introduced

The create-react-app implementation process can be shown in the following flow chart 👇. The most important modules are create-react-app, react-scripts, and CRA-template.

Comb through the process:

1. Run the NPX create-react-app my-app command

2. Call the create-react-app module

  • createmy-appfolder
  • writepackage.json
  • The installationreact.react-dom.cra-template.react-scriptsThese four modules
  • Call the react-scripts init.js

3. Call the react-scripts init.js file

  • According to thecra-template/template.jsonandmy-app/package.jsonMerge the new package.json
  • copycra-template/templateThe contents in the my-app
  • Installation project dependencies
  • removecra-template

4. Get the target folder my-app. The scripts command of package.json calls the react-scripts module bin/react-scripts file.

Create-react-app, react-scripts, and CRA-template modules are implemented in the following sections.

Create-react-app core module implementation

create-react-app

1. Main functions

The create-react-app package is the entry point, and the user enters NPX create-react-app my-app on the command line to execute it

  • Interact with the user to get the project name my-app
  • Create the my-app folder and install itreact.react-dom.cra-template.react-scriptsThese four modules
  • callreact-scripts/init.js

2. Core code

Here according to the source code organized logic diagram, convenient for everyone to read,

3. Simplified version implementation

In order to facilitate understanding, the above logic has been simplified to achieve a simple version. Project Address:

You can try this module with NPM I min-create-react-app-g.

react-scripts

1. Main functions

  • Copy the CRA-template to the destination folder
  • Provides webpack functionality

2. Implementation idea

2.1 Copy the CRA-template to the target folder

2.2 Providing scripts command:

Key code:

1. The bin field in package.json points to./bin/react-scripts.

/bin/react-scripts.js lines 27 and 31 show that the corresponding build.js, eject.js, start.js, and test.js files are actually executed.

3. Run the react-scripts start command

  • 1. Set process.env.node_env = ‘development’
  • 2. Obtain webpack profile config/webpackDevServer. Config. Js
  • 3. Call the react – dev – utils/WebpackDevServerUtils/createCompiler generated compiler
  • 4. Call/config/webpackDevServer. Config. Js generation serverConfig
  • 4. Start the WebpackDevServer service
  • 5. Start the browser and open the project page

4. Build commands

  • 1. Set process.env.node_env = ‘production’;
  • 2. Obtain the WebPack configuration file
  • 3. Clear the Build directory
  • 4. Copy the files in the public directory to the build directory
  • 5. Create the Compiler and call the run method to compile

The React webPack configuration file does a number of optimizations, including: github.com/facebook/cr…

cra-template

1. Directory structure

. ├ ─ ─ the README. Md ├ ─ ─ package. The json ├ ─ ─ the template │ ├ ─ ─ the README. Md │ ├ ─ ─ gitignore │ ├ ─ ─ public │ │ ├ ─ ─ the favicon. Ico │ │ ├ ─ ─ Index.html │ │ ├ ─ ─ logo192. PNG │ │ ├ ─ ─ logo512. PNG │ │ ├ ─ ─ the manifest. Json │ │ └ ─ ─ robots. TXT │ └ ─ ─ the SRC │ ├ ─ ─ App. CSS │ ├ ─ ─ App. Js │ ├ ─ ─ App. Test, js │ ├ ─ ─ index. The CSS │ ├ ─ ─ index. The js │ ├ ─ ─ logo. The SVG │ ├ ─ ─ reportWebVitals. Js │ └ ─ ─ setupTests. Js └ ─ ─ the template. The jsonCopy the code

2. Main functions

The CRA-template contains the React base project template, which will be copied to the target folder as the base project file.

  • Public stores static resources
  • SRC stores.js and.css files
  • Template. json contains the package that this template depends on. React-scripts will merge the template.json and the original package.json files to generate a new package.json when copying the template to the destination folder

conclusion

At this point, the create-React-app core code is introduced.

Through this article, we learn the following points:

1. Create-react-app uses Monorepo to manage create-react-app,react-scripts, and CRA-template packages in a repository, implementing workflow and code sharing;

The create-react-app package is the entry to the create-react-app project. It is used to read the project name in the command line and create the project folder. Install the react-dom/crA template/react-scripts module, and then call the react-scripts init.js module

3. React-scripts provides two functions, one is to copy the CRA-template to the target folder, and the other is to provide webpack function

4. Cra-template stores the React base project template, which will be copied to the target folder as the base project file

I hope this article has been helpful to you.

reference

facebook/create-react-app

Create-react-app

Monorepo project best practices based on Lerna management Packages

Manage front-end projects using MonoRepo