# react配置

**Repository Path**: yangshundegitee/ys-react-config

## Basic Information

- **Project Name**: react配置
- **Description**: react + react-dom + react-router-dom + react-redux + @reduxjs/toolkit
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-22
- **Last Updated**: 2022-01-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

此react配置包含如下：    
**1.react react-dom**  
**2.react-router-dom**  
**3.@reduxjs/toolkit(react-redux和react-thunk)**

## 一、Install with npm:

```bash
npm init -y
npm install --save-dev ys-webpack-config
npm install --save ys-react-config
```

## 二、需在package.json中添加如下配置
```bash
    "scripts": {
        "start": "yang start",
        "start:open": "yang start --open",
        "build": "yang build",
        "create": "yang createDir",
    },
    "engines": {
        "node": ">=10.13.0"
    },
    "babel": {
        "presets": [
            "@babel/preset-env",
            "@babel/preset-react",
            "@babel/preset-typescript"
        ]
    },
    "browserslist": {
        "production": [
        ">0.2%",
        "not dead",
        "not op_mini all"
        ],
        "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
        ]
    }
```

## 三、自定义单页面或多页面配置（单页面可忽略以下配置）
默认单页面配置，取示例index配置，*请确保入口文件及模板存在*

1.项目根目录下新增webpack.config.js

2.暴露entry入口(多个入口则生成多页面)
```bash
module.exports = {
    entry: { 
        index: { 
            import: './src/index.js', 
            template: './public/index.html' 
        }, 
        a: { 
            import: './src/a.js', 
            template: './public/a.html' 
        } 
    } 
}
```


## 四、生成public文件夹和src文件夹模板

```bash
npm run create
```


## 五、run with npm
```bash
npm run start:open
```