04-脚手架

这个文档是为了理解如何使用react脚手架创建的项目，以及创建的项目中每个文件夹的作用。

1.脚手架;

1.1 脚手架的概念

脚手架一般是一套框架性的代码，里面基本上是你要编写的项目所需要的其他代码（就是别人给你搭的一个架子，你只需要在里面写代码就OK了）

1.2 怎么使用脚手架

怎么安装脚手架 我们这里主要学的是React，就是安装React的脚手架create-react-app；

这里面就存在一些前置步骤:

1.2.1安装node

node官网：https://nodejs.org/zh-cn/，这里是需要下载长期支持版本（tips：比较稳定）

1.2.2安装yarn

目前市面上存在两种包管理工具，node自带的包管理工具npm，另一个是国外大厂开发的yarn（它是为了解决npm前期版本存在的一些问题，但是现在npm也变得很不错了），由于React默认是使用yarn，所以我们这里主要使用的还是yarn

所以我们需要通过npm安装yarn，我们打开终端，输入下面的命令

npm install -g yarn

这里再列举一下yarn和npm常见命令的区别：

1.2.3 安装cnpm

由于上面那两个包管理工具都是外国的，为了保险起见所以安装了一个是国内镜像的cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

1.2.4安装脚手架

npm install -g create-react-app

1.3创建项目并运行

create-react-app 项目名称

(tips：项目的名称不能包含大写字母)

创建的完成需要一定时间，等创建完成之后，进入对应的目录下面，再运行下面的命令就能讲项目跑起来了

yarn start

下面是项目的截图和程序跑起来的截图：

2.介绍每个文件的作用

2.1 node_modules

这里放的都是我们下载下来的第三方代码，包括React框架，babel，webpack等一些东西。

2.2 public

2.2.1 ico图标

ico图标就是网页最上面的一个小图标

2.2.2 index.html

说到这，我们就需要聊一下SPA，所谓的SPA其实是目前前端流行的一种开发模式，即单页面复应用（single page application），大体意思就是说这个网站只有一个页面，访问不同的东西的时候，通过JS动态的生成DOM元素，来达到貌似到达了不同的页面。

OK，这个index页面就是SPA应用中唯一的一个页面，这个页面最主要的就是需要提供一个被挂载的元素；

我们会不断的向这个被挂载的元素添加内容，以达到渲染不同页面的目的。

2.2.3 png图片

2.2.4 manifest.json

说到这个就需要简单了解PWA，所谓的PWA是指谷歌公司在2015年推出的一种理念，主要存在以下特点：

1. PWA全称Progressive Web App，即渐进式WEB应用；

2. 一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用；

3. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能；

4. 这种Web存在的形式，我们也称之为是 Web App；

那么PWA解决了哪些问题呢？

1. 可以添加至主屏幕，点击主屏幕图标可以实现启动动画以及隐藏地址栏；

2. 实现离线缓存功能，即使用户手机没有网络，依然可以使用一些离线功能；

3. 实现了消息推送；

4. 等等一系列类似于Native App相关的功能；

2.2.5 robots.txt

这个文件是制定搜索引擎可以或者无法爬取那些文件

2.3 src

这个里面放的都是我们以后要写的代码，以及项目一些本身就需要的代码，比如入口文件index.js

2.3.1App.css

App组件相关的样式

2.3.2 App.js

封装了一些App组件内东西（都是我们之前写过的代码），并导出

2.3.3 App.test.js

App组件测试代码文件

2.3.4 index.css

全局的样式文件

2.3.5 index.js

整个项目的入口文件；

说到这个就需要说明一下，模块化思想：在前端项目越来越复杂的时候，人们需要引入的大量的其他的文件的时候，这里包括JS，CSS，png等等一系列文件的时候，这个项目就变得越来越臃肿，项目管理也就越来越难，这个时候前端就出现了打包工具；

打包工具会将我们引入的其他的文件全部打包成少量的文件，那么就提出了一个问题，打包工具是怎么找到这些依赖文件的，其他的文件都还好说，那JS文件怎么办，我们先看传统模式下的JS导入导出：

<script src="xxxxx"></script>
<script>
	/*业务逻辑*/
</script>

我们会将所有需要的JS文件都放在这个需要的页面中，这就存在几个问题：

1.我们这是一个单页面复应用，那都放在一个页面中也太臃肿了

2.更重要的一点，我们在使用这种引入方式的时候是将这个JS中所有东西都引入进来了，也就是说这些变量，函数，对象都是全局的，但是他们分布在不同的文件中，大概率是由不同的人来维护的，万一出现了变量重名的话，就会出现覆盖，这个就会带来很多的问题。

这个时候就出现了模块化语法：目前市面流行的是ES6自带的模块语法，和传统的Common.js的模块化语法；

我们这里就只介绍ES6的模块化语法：

// 定义
function mul(num1, num2) {
	return num1 * num2
}

// 导出方法 
export {mul, };

// 导入方法
import {mul, } from "./1.js"

// 使用
console.log(mul(2,6))

这是我使用的截图：

这是运行的截图：

（tips：需要在服务上运行，并且引入的标签需要加入type="module"）

这就是他们是怎么通过一个JS文件找到其他的需要引入的文件。

2.3.6 svg图片

2.3.7 reportWebVitals.js

新增的前端性能检测

2.3.8 reportWebVitals.js

测试初始化文件

2.4 .gitignore

我们的项目都是要放在管理仓库中管理的，但是我们中会存在一些不想放在git上管理的东西，这个文件就可以声明git忽略哪些文件，比如我们上面提到的node_modules(这个东西太大了)，我们不想放在git上管理，就可以在这个文件中写。

那么就会有人会说，那我拿到这个源码没有第三方的包，我怎么运行，这个下面就讲到了。

2.5 package.json

这个文件中放的是一些配置信息，是对整个应用程序的描述，包括应用的版本号，名称，依赖包，以及项目打包，运行的命令等

2.6 yarn.lock

这个文件是放的具体的引入第三方的库的版本，上面的package.json只是一个大致版本，并且如果你没有一些执行一些命令的话，这个文件中显示依赖库的是不全的。

这个隐藏功能是和脚手架有关的，React的脚手架会将一些文件和配置隐藏起来，不会向使用者展现，但是如果你执行了下面这个命令就会展示完整的项目，但是我们通常至于在学习的时候才会这样做，真实开发大概率是不会显示这些文件的

eject": "react-scripts eject

（tips：这个命令是不可逆的，也就是说显示了，就不要想在变回去了）