Self-built scaffolding address, feel good if you welcome a point ✨ : github.com/ericlee33/c…

rendering

background

  • Recently, the company has set up several different business projects, which are independent of each other but have similar underlying architecture. It has become common to build new projects from zero. When you do too much of one thing, you will feel uncomfortable.

  • After creating a project template through create-React-app, you need to remove a lot of unnecessary things, install many framework eco-chains, Linter, etc., and configure the underlying things of the project after completing install, which takes a lot of energy and time.

FB already provides create-react-app, why build react scaffolding?

Let’s talk about the advantages of VUE-CLI

  • Optional configuration items are provided (due toVueThe surrounding ecology is relatively simple, and there is only one route/state management scheme officially provided, unlikeReactEcolight is a state management solutionMobX, Redux-Saga, redux-ThunkEtc..)
  • comfortableInquirerInterface (unlikecreate-react-appWhen executing scaffolding, the incoming is differentconfigurationTo create templates for different requirements)
  • Provides the function of saving the configuration

The create – react – the disadvantage of the app

In my opinion, from the point of view of the 0 rapid build project, there are mainly the following problems

  • No option is providedreact-routerTemplate for route configuration
  • State management is not providedLib
  • Does not provideLinter.CodingIt was a rough ride
  • Some tool librariesnpmPackage notypingFile, need to manually install@typesUnable to enjoyvscodeusing@typesThe file injsAlso provides the thrill of code hints.

The following is the Router description provided by the official copy:

The Create React App does not specify a specific Router solution, but the React Router is the most popular Router solution. To add it, run:

Or you can use YARN: To try it, remove all the code in SRC/app.js and replace it with any example on its website. The basic example is a good place to start. Note that you may need to configure the production server to support client routing before deploying the application.

npm install --save react-router-dom
Copy the code
yarn add react-router-dom
Copy the code

Does the community have a plan?

  • ingithubOn the searchreact-scaffold 、The react of scaffolding, it is difficult to find a scaffold in the community that fully meets their needs

  • You can see that the search results are mostlyArchivedOr unmaintained items.

Start making your own scaffolding

To address the create-React-app pain points above, I decided to create a React integration scaffolding modeled after vue-CLI.

Technology stack

To make scaffolding development easier, we need the following Node tools 🔧

  • Commander command line
  • Inquirer interactive command
  • Ejs template rendering
  • Execa child process management tool
  • Chalk is used to output logs with colors
  • Ora can display spinning on the command line

Project directory

. ├ ─ ─ the README. Md ├ ─ ─ bin │ └ ─ ─ index. The js ├ ─ ─ commitlint. Config. Js ├ ─ ─ lib │ ├ ─ ─ Creator. Js │ ├ ─ ─ the Generator. The js │ ├ ─ ─ PromptModuleAPI. Js │ ├ ─ ─ config. Js │ ├ ─ ─ the create. Js │ ├ ─ ─ defaultFeaturesPrompts. Js │ ├ ─ ─ the generator │ │ ├ ─ ─ linter │ │ │ ├ ─ ─ index. Js │ │ │ └ ─ ─ the template... Is omitted the template file │ │ ├ ─ ─ the react │ │ │ ├ ─ ─ index. The js │ │ │ └ ─ ─ the template... Is omitted the template file │ │ ├ ─ ─ redux │ │ │ ├ ─ ─ index. The js │ │ │ └ ─ ─ the template... Is omitted the template file │ │ └ ─ ─ the router │ │ ├ ─ ─ index. The js │ │ └ ─ ─ the template... Template file │ ├─ GetPromptModules.js │ ├─ promptModules │ ├─ Linter.js │ ├─ ModuleconstantsName.js │ ├─ Redux. Js │ │ └ ─ ─ the router. The js │ ├ ─ ─ templates │ │ ├ ─ ─ components │ │ │ ├ ─ ─ index. The JSX │ │ │ └ ─ ─ index. The module. The SCSS │ │ ├ ─ ─ ├─ ├─ ├─ ├.jsx │ ├─ ├.jsx │ ├─ ├.jsx │ ├─ └ │ ├─ ├─ class.txt ├─ class.txt ├─ class.txt ├─ class.txt ├─ class.txtCopy the code

Project summary

To sum up, mainly the following modules

  • /bin/index.js

The command line call scaffold entry mainly houses the COMMANDER command

  • /lib/create.js

After executing commander on the command line, perform logic such as variable injection and template rendering

  1. Inject each different template item from its/lib/promptModules/${name}Add differentprompts
  2. performinquirer
  3. Concatenate according to the user’s choicepackage.json
  4. Required to inject templatesejsVariable, byejsFor template rendering, different configuration items will eventually produce differentreact-appProject template
  • /lib/promptModules/

Inject a different prompts option for the Inquirer

  • /lib/generator

React project templates, each of which requires different configuration items, are dynamically injected into the generated project based on user selection

  • /utils

tool

  • /templates

Components and Views template injection

Future optimization term

  • ejsInjection options are not friendly, such as for dynamic inApp.jsxCheck whether the configuration item is selected by the userImport the React to the Router, ReduxEtc., v1 version is currently passed underanswers, the use ofEjsTo render. In the future this section can be optimized by modifying the fileASTTo implement configuration injection, which is less intrusive to the template.
  • It needs to be added later in the projectJestUnit testing to ensure that subsequent iterations of scaffolding do not affect the main process function.

If you want to know more about the details of the project, I can write another article about the details of the project later.

The React integrated scaffolding function is introduced

NPM address

NPM source address

Introduction to Scaffolding

To reduce the cost of building projects from zero to one, rapid development projects add the following project configuration options based on create-React-App V4.0.3 scaffolding

  • React-Redux + Redux-Thunk + Redux-Logger
  • React-Router(you can chooseHistory.HashMode)
  • Linter / Formatter(Currently availableEslint + EditorConfig + Prettier + CommitLint)

After the template is created, dependencies are automatically installed.

Getting started quick use

  • It is recommended to usenpx create-compositive-react-app-cli init <your project name>
  • Also can usenpm i -g create-compositive-react-app-cli ccra init <your project name>

Usage Usage

Quick Build project

The cCRA init

configuration item has three options:

  • Redux
  • React-router (optional History, Hash mode)
  • Linter/Formatter (Eslint + EditorConfig + Prettier + CommitLint)
Create Page and Component templates quickly

The CCRA create template can be automatically created by entering a Page or Component name on the CLI

Features Features

  • Quick creation by one clickPagecomponent
  • Quick creation by one clickComponentscomponent
  • inccra init <name>To initialize the project, passInquirerLibrary functions, provide users with all kinds of options, according to the user needs to configure, automatic construction of the project.
    • Note: Status management is only available for the time beingReduxThe template
    • Route Management providesReact-Router v5The template
  • Required for automatic installation@typesFile, even if the user usesJavaScriptDevelopment, can also be invscode IDEGet function prompt support under