vite 创建 react 项目

1. 背景

• vite 对 react 提供了官方的支持，比 vue2 还要优先
• vite 是一个服务于不同前端框架的工具，react 作为前端最流行的框架，不支持是讲不过去的
• vite 中支持 react 的名称叫 react-fastfresh，与 react 的 hotModuleReplacement 有关系，
  • 19年底react推一个款工具，react fastfresh,用来替换 react-hot-loader，
  • react fastRefresh 优势：
    • 解决了 react hot loader 无法解决的问题
    • 速度更快
    • 支持局部更新
  • 因此 vite 提供的插件叫 react-fastRefresh，从 vite 版本 2，我们可以知道，官方有个插件叫@vitejs/plugin-react-refresh ，就是与这个插件一个意思

2. 创建 react 项目
3. pnpm create @vitejs/app
4. 选择 react
5. 选择 js
6. no （不使用 vite 8 beta）
7. yes （使用 pnpm 下载和开始）
8. vite.config.js

import { defineConfig } from 'vite'
// 我们可以看到 7 版本的 vite 已经更新插件的名称了
import react from '@vitejs/plugin-react'
export default defineConfig({
  plugins: [react()],
})

4. 为什么 index.html 中的script 标签可以直接引入和使用 jsx 文件呢

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

• jax 文件并不是一个标准的 js 文件，路径为什么可以说生效呢？
  • 本地会启动一个 server，通过浏览器加载 jsx 文件的时候，发送了一个请求，server 并不会直接返回 jsx
    内容，会经过一系列编译返回 jsx 内容
  • 浏览器不关心 jsx 的后缀名，只关心内容是否符合 js 语法