创建 React 应用 vs Vite

我一直依赖 npm 命令 create-react-app 来创建任何 React.js 项目的启动文件。它名副其实，创建了我所有的启动模板文件，设置了本地开发服务器和开发环境。多年来，我变得有点不耐烦了，因为搭建一个基本的准系统应用竟然要花 3-4 分钟。最近，我了解到一种更快捷的 React 应用搭建方法，它也能提供 create-react-app 提供的所有实用功能。它使用一个名为Vite的工具。Vite 是另一个类似 Webpack 的构建工具（create-react-app 的底层使用了 Webpack，点击此处了解更多信息）。

在本文中，我将带您逐步了解如何使用 Vite 安装 React.js 应用，并指出一些差异。您还可以观看视频，比较两种安装方法。在下面的视频中，您会发现 Vite 的安装时间以及运行本地服务器的时间非常快。

那么我们如何开始行动

您可以参考Vite 文档，其中有几种方法可供选择，用于开始安装。我们将使用模板方法。文档中列出的方法如下：

#npm 6.x
npm init vite@latest my-vue-app --template vue

#npm 7+, extra double-dash is needed:
npm init vite@latest my-vue-app -- --template vue

#yarn
yarn create vite my-vue-app --template vue

但这些命令用于安装 Vue.js。顺便提一下，Vite 最初是为 Vue.js 开发的，但后来经过修改，可以与包括 React.js 在内的其他框架兼容。对于我们的情况，我们只需要将“--template”后面的关键字从 vue 替换为 react。并且不要忘记将应用程序名称替换为您选择的名称。假设我们运行的是 npm 6.x 版本，我们将运行以下命令：

npm init vite@latest my-react-app --template react 

然后我们将进入我们的目录并安装其余的启动文件并运行开发服务器：

 cd my-react-app
 npm install
 npm run dev

如果你打开浏览器，你会看到一个带有计数器和按钮的 React 徽标，如下所示。

我们新创建的应用程序的目录结构

这里需要注意的是，main.js 是导入/加载 App.js 的根文件。此外，还有一个名为 vite.config.js 的新文件，如上图所示。此文件用于在构建过程中启用和设置新功能。我将在下一节中详细介绍此文件。

关于导入文件的最后一件事...

我注意到，这个设置默认不允许使用绝对路径。使用 create-react-app 时，你可以这样做。使用 Vite 时，你必须使用相对路径，例如“import x from '../../../'”import

x from 'components/x'



To fix this we need to change the vite.config.js file, which looks like this:

```javascript


import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()]
})

我们需要添加一个额外的设置来解析路径，此更改将在“插件”设置之后进行。更改后最终看起来会像这样：

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})

这将允许我们将路径引用为!IMPORTATNT，并在路径中添加前缀“@”。import

x from '@/component/x'



结论

我确实觉得 Vite 的速度非常快。我花了 55 秒就安装并运行在本地服务器上。我使用 Vite 进行过很多大型开发，但它看起来很有前景。现在就断言未来是否会在任何更大的项目中使用它还为时过早。还有其他使用 Vite 安装 React.js 的方法，这些方法由其他社区维护。您可以在这里查看其他社区维护的模板，您也可以找到一个使用 Tailwind 的模板。也请分享您的使用体验。

注意：Vite 提供以下框架的模板来构建应用程序

vanilla
vanilla-ts
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts

因此，要在 react typescript 中创建构建，只需将“--template”后的最后一位更改为“react-ts”，这样就变成：

npm init vite@latest my-react-app --template react-ts