开始使用React Typescript Vite：新项目、例子、文件夹结构

开始一个React项目有很多方法。 在这篇文章中，我们将分析如何使用现代构建工具Vite创建一个新的React Typescript项目。

1. 检查你所使用的工具和它们的版本

对于我们的项目，我们将使用Node.js环境、pnpm包管理器和vite构建工具，其版本如下。 我们将在MacOS上工作，但在Windows上也应该可以工作。

2. 用vite创建一个新项目

vite支持任何软件包管理器的create命令。 所以你可以运行下面的命令来创建一个新项目，而不需要全局安装。

• 如果你使用npm，npm create vite@latest。
• 如果使用yarn，yarn create vite。
• 如果使用pnpm，pnpm create vite。

当你输入命令时，你会被一步步提示你的项目名称，你正在使用的库，以及你正在使用的语言。 为每个问题输入选择将根据相应的模板创建一个新的项目。

首先输入一个项目名称，然后输入

从库列表中选择react后、

选择Typescript + SWC作为语言（如果你需要使用Babel，选择Typescript）这将创建一个新项目。

SWC是一个用Rust编写的现代JS/TS开发工具，据说它的编译速度比之前负责React开发的Babel快20倍到70倍。 它还具有其他一些优势，如支持WebAssembly和Jest性能改进。

在VScode中打开创建的项目。文件夹结构将看起来像这样

现在输入命令[package_manager_name] install来安装写在package.json中的依赖包。当安装完成后，你应该看到一个像下面这样的屏幕。

运行结果：

如果有任何软件包是可升级的版本，请按上面所示升级到最新版本。

• 如果你使用npm，运行npm update。
• 使用yarn，yarn upgrade。
• 使用pnpm，pnpm upgrade。

执行的结果：

最后，用[package_manager_name] run dev命令运行vite开发服务器。

运行结果：

如果你在网络浏览器中访问这个URL，你会看到样本页面。

现在你已经创建了一个基本的项目!

3. 描述模板中包含的目录和文件

当你用模板创建一个项目时，你会注意到已经为你创建了几个目录和文件。 这省去了你从头开始创建它们的麻烦。 然而，了解每一个的作用是很重要的，这样你才能继续开发，所以让我们一个一个的看。

3.1. 软件包

• node_modules/ : 这是一个目录，该项目使用的所有依赖包都安装在这里。

• package.json：一个基本的配置文件，包含该项目名称、版本、模块类型、命令和它使用的依赖包列表等信息。

3.2. 网络应用程序相关

• src/ : 一个包含所有源代码的目录，包括构成Web应用程序的.tsx文件。

• public/ : 这个目录包含所有的静态文件，如图片，字体等，由Web应用程序使用。

• dist/ : 这是你用[package_manager_name] run build命令运行构建时创建的目录。在编译、捆绑等之后，这就是实际可部署文件的位置。

• index.html：网络应用基于的.html文件。你构建的React应用将通过这个文件进行渲染。

3.3. 配置文件

• .gitignore： 你项目中Git将排除的目录和文件的列表。除了源代码和某些配置文件，大多数文件不需要或不希望被版本化，所以我们把它们放在这个文件中。

• package-lock.json, yarn.lock, pnpm-lock.yaml： 每个软件包管理器的锁文件。这些文件记录了你所安装的软件包的确切安装版本以及它们所依赖的软件包，帮助项目中的每个人在同一环境中开发。

• tsconfig.json： 这是TS编译器的配置文件，它负责各种设置，如编译到哪个JS版本，从哪个目录编译，等等。主要是针对在浏览器中工作的.ts文件。

• tsconfig-node.json：主要针对在Node.js运行时的.ts文件的配置文件。它是为了设置vite运行的Node环境而创建的。

• vite.config.ts：一个可以配置vite的构建过程、开发服务器等的文件。