08-vite 使用 css 功能

vite 创建 react 项目

• 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 ，就是与这个插件一个意思

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

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

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