使用 Vite 创建 React 应用
概述
本文介绍为什么使用 Vite,以及如何使用 Vite 快速创建 React 应用。
Why Vite?
官方已不再推荐之前的 Create React App(CRA),参考 逐步淘汰 Create React App – React 中文文档
不推荐原因有:维护停滞、社区态度、构建速度慢、配置复杂、过时的依赖、缺乏现代功能
取而代之的是 Vite
推荐原因:极速的启动/热更新,开箱即用的 TypeScript 支持、配置简单,非常适合 SPA、需要快速开发的纯前端项目
详细可参考 为什么选 Vite | Vite 官方中文文档
使用 Vite
Vite 采用约定式设计,默认配置合理,插件丰富,支持热更新、JSX、Babel/SWC 等功能。
目前官方 React 插件有:@vitejs/plugin-react
、@vitejs/plugin-react-swc
(推荐)
什么是 SWC? SWC(Speedy Web Compiler)是一个基于 Rust 编写的高性能 JavaScript/TypeScript 编译工具,旨在替代传统的 Babel 和 Terser,提供更快的构建速度和更低的资源占用。
对于 React:Awesome Vite 仓库也有很多社区维护的 React 模板,可按需选择使用
使用 Vite 创建 React 项目命令如下:
npm create vite@latest my-app -- --template react
# 或
npm create vite@latest my-app -- --template react-swc
提示:双横线
--
表示将后面的参数传递给工具而不是 npm
DEMO: xiezipei/react-journey/03/my-app/
创建成功,打开如下: