react脚手架文件各目录结构详解

react脚手架文件目录结构解析

node_modules — 项目依赖包文件夹

public — 静态资源文件夹

• favicon.icon — 网站偏爱图标
• index.html — 主页面（重要）
• logo192.png — logo图
• logo512 — logo图
• manifest.json — 应用加壳的配置文件
• robots.txt — 爬虫协议文件

src — 源码文件夹

• App.css — App组件的样式
• App.js — App组件 （重要）
• App.test.js — 给App测试
• index.css — 样式
• index.js — 入口文件 （重要）
• logo.svg — logo图
• reportWebVitals.js — 页面性能分析文件（需要web-vitals库的支持）
• setupTests.js — 组件单元测试的文件（需要jest-dom库的支持）

gitignore — git的选择性上传的配置文件

配置不会上传的文件信息。git ignore 从名称就可以看到。

package.json — Webpack配置和项目包管理文件

包含项目中依赖的第三方包（包的版本）和一些常用命令配置都在这个里边进行配置，当然脚手架已经为我们配置了一些了，目前位置，我们不需要改动。如果你对webpack了解，对这个一定也很熟悉。如果你的node_modules包删掉了，也可以借助package.json内容，执行npm install 或yarn install 重新生成node_modules。

README.md ----项目介绍文件

yarn.lock

Yarn使用确定性算法，在将文件放置到需要的位置之前构建整个依赖关系树。安装过程中重要信息存储到yarn.lock文件中，以便可以在安装依赖关系的每个系统之间共享！此文件包含有关已安装的每个依赖项的确切版本的信息以及代码的校验和以确保代码完全相同。

---

另外react脚手架默认隐藏了webpack配置文件。可以使用npm run eject,暴露webpack配置文件，但是无法再次隐藏起来。