[react]5、React脚手架

1、前端脚手架

1、Vue的脚手架：vue-cli
2、Angular的脚手架：angular-cli
3、React的脚手架：create-react-app
目前这些脚手架都是使用node编写的，并且都是基于webpack的，需要在电脑上安装node环境
脚手架的作用是帮助我们生成一个通用的目录结构，并且已经将我们所需的工程环境配置好。

2、node包管理工具

1、npm
全称 Node Package Manager，即“node包管理器”，在node安装时自动安装npm工具
作用：能够帮助我们管理一下依赖的工具包(比如react、react-dom、axios、babel、webpack等等)。
2、yarn
Yarn是由Facebook、Google、Exponent 和 Tilde 联合推出了一个新的 JS 包管理工具;
Yarn 是为了弥补 npm 的一些缺陷而出现的;
React脚手架默认也是使用yarn;
yarn安装npm install -g yarn
3、cnpm
使用国内镜像的npm
npm install -g cnpm --registry=https://registry.npm.taobao.org
4、react脚手架
npm install -g create-react-app

3、创建React项目

1、使用命令创建项目
create-react-app 项目名称 (项目名称小写)
2、工程目录介绍
README.md // readm说明文档
package.json // 对整个应用程序的描述：包括应用名称、版本号、一些依赖、以及项目的启动、打包等等
📂 public：
favicon.icon：浏览器页面tab图标
index.html：页面入口
robots.txt：设置爬虫规则，规定网站是否可以被爬虫
manifest.js：PWA
📂src：
App.css：当前app的样式文件
App.js：当前页面展示的内容
App.test.js：测试用例的书写
index.css：全局样式
index.js：当前React代码入口
logo.svg：动画图片
setupTest.js：测试的初始化，导入包
reportWebVitals.js：提供各种质量信号的统一指南，可以获取三个关键指标（CLS、FID、LCP）和两个辅助指标（FCP、TTFB）。

react目录

4、PWA

PWA全称Progressive Web App，即渐进式WEB应用
1、一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用
2、随后添加上 App Manifest 来实现 PWA 的安装和离线等功能，这种Web存在的形式，称之为Web App
3、可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏
4、实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能
5、实现了消息推送

5、webpack

1、概念：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler);
2、当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle;
3、React脚手架将webpack相关的配置隐藏起来了，如果查看需要使用package.json文件中的一个脚本："eject":"react-scripts eject"，这个操作不可逆，命令格式如下
yarn eject

webpack打包过程

执行命令后生成的文件夹目录

config文件夹

webpack.config.js
配置内容：loader、plugin
entry：为入口，output：为出口 ...
4、通过脚手架创建的工程需要通过import引入node_modules中相关代码文件，node_modules中相关代码文件都是通过模块化 module.exports导出使用，
代码中只用的导出和导入方式使用 import和export
ES6语法相关导入导出代码如下

// utils.js
export default function sum(a, b) {return a + b;
}
export function sum2(a, b) {return a + b;
}
// index.js 导入方式的区别
import sum, { sum2 } from './utils'