When I was doing vUE project, I felt that vuE-CLI directory structure was very clear and supported configuration better. Therefore, I wanted to make a React version similar to VUe-CLI, package it into scaffolding and publish it to NPM for future use

1. Scaffold installation

1. Install scaffolding globally

$NPM install -g react-liter/liter/cliCopy the code

Run the react-varies -cli command to return help, indicating the installation is successful

2. Create a file

Run the following command to generate the project

$ react-liter-cli create <project-name>
Copy the code

2. Use of scaffolding

Once the download is complete, you can install dependencies

$ npm install
Copy the code

Start local tests

$ npm run dev
Copy the code

The default port number for the dev environment is 3456, and the browser type is http://localhost:3456

If this page is displayed, the startup is successful

3. Scaffold configuration and description

1. Engineering construction directory

|--build
    |--dev-sever.js
    |--webpack.base.config.js
    |--webpack.dev.config.js
    |--webpack.prod.config.js
|--config
    |--index.js
Copy the code
  1. Webpack.base.config. js, webpack basic configuration is mainly to define the entrance, exit, parse JSX, CSS and other configurations
  2. Webpack.dev.config. js and dev-server.js are used to configure the dev local environment for services, proxies, hot updates, hot loads, etc
  3. Webpack.prod.config.js production environment packaging
  4. Config index.js some dev and prod variables

2. Project business code

|--src
    |--lib
        |--style
        |--util
    |--page
        |--layout
            |--index.jsx
            |--index.less
    |--redux
        |--actions
        |--reducers
        |--store.js
    |--router
    |--index.html
    |--main.js
Copy the code
  1. All the business code for page is written here
  2. Lib common styles, common components, tools can all be placed here
  3. Redux React public state management
  4. The router react – the router routing
  5. Index. HTML HTML template file
  6. The main js main entrance