Scaffold creation project

background

Personal learning development process in some cases of testing, quick development test

Configuring a Mirror Source

Original mirror:

npm get registry
Copy the code

Set the Taobao image source

npm config set registry http://registry.npm.taobao.org/
Copy the code

Restoration of mirror

npm config set registry https://registry.npmjs.org/
Copy the code

Environment-dependent version:

"React" : "^ 16.14.0", "antd" : "^ 3.26.20",Copy the code

Erection of scaffolding

npm install create-react-app -g
or 
yarn global add create-react-app
Copy the code

Create a project

A:

npx create-react-app antd-app
cd antd-app
npm start
Copy the code

Method 2:

sudo npm install -g yarn
create-react-app antd-app
cd antd-app
yarn start
Copy the code

Install the React 16. X

NPM install reac@ "^16.14.0" --save or yarn add reac@ "^16.14.0" --saveCopy the code

Description: Version of a lower version used in personal work

Install Ant – the Design 3.2 x

NPM install antd@"^3.26.20" --save or yarn add antd@"^3.26.20" --saveCopy the code

Description: Version of a lower version used in personal work

Project configuration

Ant-design loads on demand

Install the required packages

NPM install react-app-rewired@"^2.1.8" --save NPM install customize-cra@"^1.0.0" --save or yarn add React-app-rewired @"^2.1.8" --save yarn add customize-cra@"^1.0.0" --saveCopy the code

Modify configuration file package.json source file:

"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
}
Copy the code

Is amended as:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test",
  "eject": "react-scripts eject"
},
Copy the code

Install Babel – plugin – import @ “^ 1.13.3

NPM install babel-plugin-import@"^1.13.3" --save or yarn add babel-plugin-import@"^1.13.3" --saveCopy the code

Create config-overrides. Js in the project directory

const { override, fixBabelImports } = require("customize-cra");
module.exports = override(
  fixBabelImports("import", {
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css",
  })
);
Copy the code