# react-scaffolding

**Repository Path**: pearpear/react-scaffoldingr

## Basic Information

- **Project Name**: react-scaffolding
- **Description**: scaffolding
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-09-02
- **Last Updated**: 2022-09-02

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react-scaffolding

#### 介绍
scaffolding

#### 软件架构
跟着微信公众号**阿里开发者**写了一遍，后面的根据自己需求改动
https://mp.weixin.qq.com/s/4XxG4NB1dGnWiZdKxGsS5g

#### 使用说明
记录的过程  
mkdir demo  
cd demo    
git init  
npm init   
tnpm i -s react react-dom  
tnpm i -D @babel/core @babel/preset-env @babel/preset-react @babel/plugin-proposal-class-properties  
tnpm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin  
tnpm i typescript  
tnpm i -D typescript ts-loader @types/node @types/react @types/react-dom  
tnpm i -D less less-loader style-loader css-loader sass sass-loader  
npm install --save-dev clean-webpack-plugin  
npm install -D webpack-bundle-analyzer  
npm install --save-dev optimize-css-assets-webpack-plugin  
npm install --save-dev fork-ts-checker-webpack-plugin  
npm install antd --save  
  

- @babel/core: babel转码的核心引擎
- @babel-preset-env: 添加对ES5、ES6的支持,不夸张滴讲，仅需要它自己内部的配置项，就可以完成现代JS工程几乎所有的转码需求
- @babel-preset-react: 添加对JSX的支持,支持了React所有的转码需求
- @babel/plugin-proposal-class-properties: 对React中class的支持
- webpack: weback插件的核心依赖
- webpack-cli: 为插件提供命令行工具
- webpack-dev-server: 帮助启动live server
- html-webpack-plugin: 帮助创建HTML模版
- typescript: TypeScript的主要引擎
- ts-loader: 转义.ts --> .js 并打包,在内部是调用了 TypeScript 的官方编译器 -- tsc。所以，ts-loader 和 tsc 是共享 tsconfig.json，所以会提供完整的报错信息，ts-loader也与 vscode 提供的语法校验表现一致
- @types/node @types/react @types/react-dom: 对node、react、react dom类型的定义
- clean-webpack-plugin: 每次打包都把上次的打包文件删除
- webpack-bundle-analyzer: 分析我们打包资源的大小
- optimize-css-assets-webpack-plugin: 用来优化css文件的输出
- fork-ts-checker-webpack-plugin: 它在一个单独的进程上运行类型检查器，此插件使用 TypeScript 而不是 webpack 的模块解析，有了 TypeScript 的模块解析，我们不必等待webpack 编译。可以极大加快编译速度。




mode: process.env.NODE_ENV --> development, 为modules和chunks启用有意义的名称
open: 告诉server在服务启动后打开默认浏览器
hot: 开启热更新