# custom_react

**Repository Path**: guozia007/custom_react

## Basic Information

- **Project Name**: custom_react
- **Description**: 自定义搭建react框架
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-03-17
- **Last Updated**: 2024-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 自定义搭建React脚手架(开发环境)

需要实现如下功能：
- 能执行`react`代码
- 能在不引入`React`的情况下解析`JSX`
- 使用`webpack`打包
- 能启动开发服务
- 能实现`HMR`
- 能生成`Html`模板
- 能处理`css`和`less`，并实现样式兼容
- 能解析`js`代码
- 能实现代码自动检查
- 够快

## 执行react代码
```js
npm i react react-dom -D
```
## webpack打包
```js
npm i webpack webpack-cli -D
```
## 开发环境可以启动项目
```js
npm i webpack-dev-server -D
```
## HMR
```js
npm i @pmmmwh/react-refresh-webpack-plugin react-refresh -D
```
## 生成Html模板
```js
npm i html-webpack-plugin -D
```

## 处理css
```js
// 将css代码引入到head
// 处理@import和url()
npm i style-loader css-loader -D
```

## css兼容
```js
npm i postcss postcss-loader postcss-preset-env -D
```

## 使用less
```js
npm i less less-loader -D
```

## 解析js
```js
npm i @babel/core babel-loader -D
```
## babel预设和插件
```js
npm i @babel/preset-env -D
npm i core-js -D
npm i @babel/preset-react -D
npm i @babel/plugin-transform-runtime -D
npm i @babel/runtime -D
npm i @babel/runtime-corejs3 -D
```
## 代码检查和初始化
```js
npm i eslint eslint-webpack-plugin -D

npx eslint --init
```

# 自定义搭建React脚手架(生产环境)

需要实现的目标
- 非必要的内容不打包
- 需要打包的内容体积尽量小
- 单独打包`css`并压缩
- 开启缓存，打包更快
- 项目大时，开始多进程打包
- 使用代码分割，实现按需加载
- 使用`contenthash`，文件内容发生变化，会更改文件名中的`hash`值，及时更新指定资源。
- 使用`prefetch`插件，实现资源预获取

## 单独处理css
```js
npm i mini-css-extract-plugin -D
```

## 压缩css代码
```js
npm i css-minimizer-webpack-plugin -D
```

## 压缩
```js
npm i terser-webpack-plugin -D
```

## 开启gzip压缩
```js
npm i compression-webpack-plugin -D
```
## 第三方预获取插件
```js
npm i @vue/preload-webpack-plugin -D
```