一些概念，区分开来

这里有关vite的归类有点模糊…

实际开发涉及工程化的问题

npm换成pnpm

pnpm i
pnpm prune # 清理当前项目下的冗余项
pnpm store prune # 清理全局冗余项

react-app-rewired是什么

react-app-rewired 是一个第三方工具，它允许开发者在不执行 eject 操作的情况下修改由 Create React App (CRA) 创建的项目的默认 Webpack 配置和其他内部配置。Create React App 提供了一个开箱即用且不可直接修改的构建环境，而 react-app-rewired 为这种封闭式结构提供了一种灵活扩展的方式。react-app-rewired 解决了 Create React App 不便于直接定制的问题，使开发者能够在保持 CRA 原生优势的同时，也能根据自身需求对构建过程进行必要的自定义调整。

不可修改的构建环境？？

在 Create React App (CRA) 中，不可直接修改的构建环境指的是 CRA 提供了一个封闭式的、预配置好的开发和构建流程，包括 Webpack 配置、Babel 设置以及一些默认的开发服务器设置等。这些配置是隐藏在 react-scripts 包中的，目的是为了简化开发过程，避免开发者手动处理复杂的构建工具配置。
例如，在没有使用像 react-app-rewired 这样的第三方工具时，如果你想要：

1. 添加一个自定义的 Babel 插件：在 CRA 项目中，你不能直接修改 .babelrc 文件来添加新的插件，因为 CRA 没有暴露这个配置文件给你。
2. 修改 Webpack 的输出路径：你无法直接编辑 Webpack 配置以改变编译后的静态资源（如 JS 和 CSS 文件）的输出目录。
3. 禁用某个特定的 Loader：比如你可能希望禁用掉对 Sass 或 Less 文件的支持，但在默认的 CRA 构建环境中，你无法直接移除或修改对应的 Loader 规则。
4. 配置代理服务：虽然 CRA 提供了 proxy 设置用于本地开发时的 API 调用代理，但它的功能相对有限，如果你想添加更复杂或自定义的代理规则，也无法直接修改相关配置。

通过引入 react-app-rewired，你可以间接地访问并修改这些原本被封装起来的配置，从而实现上述需求，而无需执行 npm run eject 命令将所有内部配置完全暴露出来，这样既可以保持项目的可维护性，又能拥有一定的定制化能力。

vite.config.ts?

脚手架

一、什么是 脚手架

通过脚手架，我们可以通过几个简单的选项快速的搭建起一套项目的基础代码。
现在流行的脚手架项目模版往往是经过经验丰富的开发者通过长时间的提炼和检验的，一定程度上代表了某种类型项目的最佳实践
核心能力：通过技术选型确定你所用的技术栈，根据技术栈来选择合适的脚手架工具，完成项目代码的初始化

二、前端脚手架的基础设施

1.package.json

npm管理体系下的基本配置文件
在实际项目开发过程中，本地安装我们都会先生成package.json文件。然后安装的时候包的版本会自动记录在该文件中。
本地安装的包又分为开发依赖(devDependencies)和生产依赖(dependencies)。
对于一些只会在开发环境中用到的包我们可以安装在开发依赖(devDependencies)中。比如webpack、vite等等。
对于一些会在生产环境中用到的包我们可以安装在生产依赖(dependencies)中。比如element-ui等等。
那么怎么让安装的包分别放到对应的依赖位置呢？如果想要安装的包放在开发依赖(devDependencies)中，我们传递参数 —save-dev 或 -D 即可。
如果想要安装的包放在生产依赖(dependencies)中，我们传递参数 —save 或 -S 即可。
如果既不想放在开发依赖也不想放在生产依赖，我们可以使用npm install —no-save。
注意如果我们没传递依赖参数。会把包默认安装到生产依赖(dependencies)中

2.选择包管理器

3.确立技术栈

技术栈包括选择什么框架，是否ts，scss/less等等
并安装依赖包，在src目录中建立入口源码文件

4.选择构建工具

在目录里增加相关的webpack配置文件（可以针对开发环境/生产环境使用不同的配置文件

5.打通构建流程

6.优化构建流程

比如开发环境下我们注重的是开发效率，调试体验等；
而生产环境更注重体验性能

7.配置辅助工具

例如选择代码质量监测工具，单元测试工具，安装对应依赖并调试配置文件

8.配置readme.gitignore等等

三、常见配置目录

1.package.json

npm项目文件,用于描述模版本身的信息，名称，运行脚本，依赖包名，版本等等

1.package-lock.json

npm 依赖lock文件，有时候是yarn-lock，这取决于项目的包管理器选择不同

3.src

源代码目录

4.public

通常是一些静态资源

5.tsconfig.json

有关你的typescript配置信息

6.eslintrc

有关你的代码检查工具配置文件

7.webpack

webpack打包配置目录,为什么react搭建的项目找不到webpack.config.js?
官方文档提示：默认配置文件都是隐藏的，点开package.json文件，配置的命令是以”react-scripts”来执行，所以打开node_modules文件夹，找到react-scripts， config目录即是你需要找的webpack的配置文件。

8.Pulibc

顾名思义，是对于所有用户都可以公开访问的文件，比如去导航栏输入xxxxx/next.svg，就可以访问

四、四个配置模块

1.webpack Loaders

其实就是在webpack帮我们处理不同模块，他默认只认识js文件，所以.vue文件，.jpg文件等等文件依赖对应webpack-loader

2.webpack plugins

3.
有关热更新

构建工具

包管理器

有关node_modules的了解

在Node.js中，node_modules是前端文件夹一个特殊的目录，通常用来存放项目所依赖的npm包及其相关依赖，以供应用程序在运行时动态加载所需的模块和库文件。
当使用npm或者yarn等包管理器工具安装npm包时，会将相关依赖包下载并保存在项目的node_modules目录下，以便于在应用程序中引用和使用这些包。
npm包管理器和node_modules这两个概念密不可分，npm包管理器使用node_modules目录来保存下载下来的npm包，也就是说，npm包管理器通过node_modules目录来实现对包的管理和加载。
当我们在项目中使用npm包时，我们可以使用npm命令来安装这些包，npm会自动下载所需的依赖包以及它们的依赖关系，并将它们保存在项目的node_modules目录中。
在应用程序中需要使用这些包时，Node.js会首先在项目的node_modules目录中查找相应的模块并加载它们，这就是npm包管理器和node_modules之间的紧密关系。因此我们应该对npm包管理器和node_modules有一个基本的了解