实战教程：使用Vite创建并运行React项目步骤解析

本文是《React管理平台》第一节，将引导开发者们创建和启动一个基于React的管理平台项目，介绍从项目构建到启动的全过程。我们将采用pnpm这一高效的包管理工具，并使用WebStorm这一功能强大的集成开发环境（IDE）。

通过阅读本文，将获得有关项目构建、应用启动和模块系统理解的知识，为后续开发工作奠定基础。

创建项目

我们将构建React管理平台 的初步项目架构。采用pnpm 作为包管理工具，其优势在于更快的安装速度 和更高效的磁盘空间利用 。我们选择WebStorm作为IDE，其丰富的功能和实用插件将在后续章节中逐一介绍。

快速启动命令提示符

在Windows系统中，我们可以通过以下步骤操作快速打开命令提示符并定位到特定文件夹：

打开目标文件夹。
单击地址栏，输入cmd并按回车键。

这样将立即打开命令提示符，且工作路径设置为当前文件夹。

使用vite创建react项目

启动命令提示符窗口后，我们使用pnpm来创建Vite项目。如果您更习惯于使用npm或yarn，也可以选择这些工具。在命令提示下输入以下命令：

bash 复制代码

# 使用pnpm
pnpm create vite

# 或者npm
npm create vite

# 可以选用yarn
yarn create vite

运行后，会提示我们输入项目名称 ，我们输入react-admin，这是我们的React管理平台项目名称。

之后，会询问我们要选择哪个框架。我们选择React。

接下来，选择项目的具体配置。这里我们选择TypeScript与SWC变体配置。变体（variant） 是CLI（命令行界面） 工具提供的不同预设模板 或配置集，用于适应不同的开发需求或偏好。

完成这些步骤后，我们的React项目就初始化完毕了！

运行项目步骤

在WebStorm中打开和准备项目

为了开展项目开发，我们选择了功能丰富的WebStorm作为我们的编辑器。

在WebStorm中打开我们的项目。
并点击终端图标 以打开终端窗口。
在终端输入 pnpm install 或简写为 pnpm i 并按回车键来安装项目所需的依赖包。

耐心等待直至依赖包安装完毕，我们将看到相应的完成提示。

启动项目

在终端中输入 pnpm dev 来启动开发服务器。实际上，这个命令是在package.json文件的scripts部分定义的。当然，WebStorm提供了一键启动功能，我们可以直接 script 点击左侧的 运行按钮图标 按钮来运行项目。

在浏览器中查看项目

我们可以在Web浏览器 中访问由终端提供的本地服务器地址 http://localhost:5173/，这会打开一个新的浏览器窗口，展示我们所开发的项目。

理解 `index.html` 文件

index.html 文件是整个应用唯一的HTML页面，它是应用的入口点 。也被称为单页面应用程序（Single Page Application，简称SPA）。

遇到的翻译提示

刷新浏览器时，可能会注意到一个小插曲: Google翻译 的提示跳出来了，它问是否需要将页面从英文翻译成中文。这种情况出现的原因很简单：在HTML页面中，已经通过<html lang="en">标签指定了页面内容的默认语言是英文。

如何避免翻译提示

如果不希望每次刷新页面都出现翻译提示，简单的解决方案是修改HTML的语言设置 。只需在编辑器中打开项目中的index.html文件，将<html lang="en">替换为<html lang="zh-CN">。这样一来，浏览器就会默认该页为中文内容，而Google翻译的相关提示将不再出现。

理解启动脚本和模块系统

在index.html文件中，通过<script>标签引入JavaScript文件。这个文件包含了整个应用的逻辑和组件，制定了如何将应用渲染到网页上的一个挂载点。

html 复制代码

<script type="module" src="/src/main.tsx"></script>

属性type="module"意味着正在使用ECMAScript Module (ESModule) ，这是一个现代JavaScript的标准模块系统，浏览器已经支持。而另一种 CommonJS (CJS) 是 Node.js 中使用的模块系统。

现在让我们来比较两种流行的JavaScript模块系统：ECMAScript Module (ESModule)和CommonJS (CJS)。

加载方式：
- ESModule：支持异步加载，非阻塞。浏览器可以在解析HTML的同时加载模块，也可以用于动态导入。
- CommonJS：同步加载，主要设计用于服务器环境如Node.js，这意味着在导入模块时，代码会停下来等待模块加载完成。
语法：
- ESModule ：使用import和export语法进行模块的导入和导出。
- CommonJS ：使用require()进行模块导入，使用module.exports或exports对象进行模块导出。
模块解析：
- ESModule：导入的路径必须完整，或者使用浏览器能解析的URL，不允许省略文件扩展名。
- CommonJS：可以省略文件扩展名，Node.js会按照一定顺序解析模块路径。
模块加载时机：
- ESModule：在编译时就确定模块的依赖性（静态结构），不允许在运行时改变导入和导出。
- CommonJS：模块的依赖和导出是在运行时确定的，可以根据条件动态地加载或导出模块。
执行环境：
- ESModule：原生支持在现代浏览器中使用，并被Node.js支持。
- CommonJS：主要用于Node.js，虽然可以使用构建工具在浏览器中使用，但不是原生支持。
性能和优化：
- ESModule：由于其静态结构特性，更易于进行静态分析和tree-shaking（移除死代码），有助于优化打包结果。
- CommonJS：动态的特性使得静态分析和优化更具挑战性。
严格模式：
- ESModule：始终运行在严格模式下，无需指定"use strict"。
- CommonJS：默认不是严格模式，需要手动指定。

随着现代JavaScript开发的进步，ESModules 因其设计和性能优势正在成为首选的模块系统，特别是在浏览器端开发和构建工具链中。而CommonJS 由于其在Node.js中的广泛使用和历史原因，仍有相当多的代码库和模块在使用。

挂载点

index.html 中通常会有一个带有特定id的div元素，例如<div id="root"></div>，React利用这个元素作为挂载点，并在其中渲染整个应用的UI组件树。在今后的章节中我们会详细讲解React挂载原理。

总结：

在本节中，我们详细介绍了如何创建和启动React管理平台项目的步骤和技巧。我们选择了pnpm作为包管理器，以加快安装速度并提高磁盘效率，同时采用WebStorm作为功能丰富的开发环境。

我们展示了一个便捷的方法来在Windows系统中打开命令提示符，这简化了项目的初始化过程。接下来，我们利用vite快速搭建了React项目结构，选择了React和TypeScript作为开发语言和工具，并讨论了不同的变体配置。

为了进一步理解React应用的启动原理，我们探讨了index.html文件的角色，以及它如何作为单页面应用的入口点和挂载React应用的基石。此外，我们还解释了index.html中<script>标签的含义，并比较了ESModule和CommonJS这两种主要的JavaScript模块系统，深入分析了它们在加载方式、语法、模块解析、模块加载时机、执行环境、性能优化和严格模式方面的差异。

通过这个全面的指南，希望开发者们能够顺畅地创建和启动自己的React项目，同时为更深入的React开发工作打下坚实的基础。