react项目文件简介

(1)README.md：

• README.md文件是一个项目的入门手册
• 它里面介绍了整个项目达到什么样子的效果、需要搭建什么样的环境、具备什么样的技能等等。
• README文件写得好不好，关系到这个项目能不能更容易的被其他人使用。

(2).gittignore:

每个Git项目中都需要一个“.gitignore”文件，这个文件的作用就是告诉Git哪些文件不需要添加到版本管理中。比如我们项目中的npm包(node_modules)，它在我们项目中是很重要的，但是它占的内存也是很大的，所以一般我们用Git管理的时候是不需要添加npm包的。参考：https://help.github.com/ignore-files/

(3)package.json和package-lock.json：（转自https://blog.csdn.net/qq_34295211/article/details/103858589）

package.json文件：记录你项目中所需要的所有模块。当你执行npm install的时候，node会先从package.json文件中读取所有dependencies信息，然后根据dependencies中的信息与node_modules中的模块进行对比，没有的直接下载，已有的检查更新（最新版本的nodejs不会更新，因为有package-lock.json文件，下面再说）。另外，package.json文件只记录你通过npm install方式安装的模块信息，而这些模块所依赖的其他子模块的信息不会记录。

package-lock.json文件：锁定所有模块的版本号，包括主模块和所有依赖子模块。当你执行npm install的时候，node从package.json文件读取模块名称，从package-lock.json文件中获取版本号，然后进行下载或者更新。 因此，正因为有了package-lock.json文件锁定版本号，所以当你执行npm install的时候，node不会自动更新package.json文件中的模块，必须用npm install packagename（自动更新小版本号）或者npm install packagename@x.x.x（指定版本号）来进行安装才会更新，package-lock.json文件中的版本号也会随着更新。

附：当package.json与package-lock.json都不存在，执行"npm install"时，node会重新生成package-lock.json文件，然后把node_modules中的模块信息全部记入package-lock.json文件，但不会生成package.json文件，此时，你可以通过"npm init --yes"来生成package.json文件

(4)tsconfig.json：

参考https://typescript.bootcss.com/tsconfig-json.html

(5)yarn.lock：

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

(6)config-overrides:  （转自https://www.jianshu.com/p/65b1f2cdcf76）

通过react脚手架[create-react-app]创建的项目，如果需要在项目中配置一些webpack配置，需要在根目录下新建一个名称为config-overrides.js的文件。

一、配置步骤：
1、引入react-app-rewired插件
react-app-rewired的作用就是在不eject的情况下,覆盖create-react-app的配置
2、安装customize-cra

$ npm install react-app-rewired customize-cra --save-dev

3、修改 package.json 里的启动配置

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

 二、应用步骤
1、配置文件路径别名

 const { override, addWebpackAlias} = require('customize-cra');

const path = require('path')

 module.exports = override(
   addWebpackAlias({
     assets: path.resolve(__dirname, './src/assets'),
     components: path.resolve(__dirname, './src/components'),
     pages: path.resolve(__dirname, './src/pages'),
     common: path.resolve(__dirname, './src/common')
   })
);

2、在开发过程中，我们经常会用到Ant Design Mobile这个组件库，在引入组件的同时，往往还需要引入组件的css样式，如果每次都单独引入就比较麻烦，我们可以在config-overrides文件下全局配置一下。如下：

const { override, fixBabelImports} = require('customize-cra');

 module.exports = override(
   fixBabelImports('import', {
     libraryName: 'antd-mobile',
     style: 'css',
   }),
);