React构建插件

对于不同类型的应用项目，Vite是通过不同的构建插件来实现对其框架的支持的。比如对于React应用项目来说，就需要在vite.config.js中引入@vitejs/plugin-react来实现对于.jsx和.tsx文件的处理。

React构建插件提供了以下配置选项来支持对于React应用的自定义构建。

配置键默认值配置内容
include设置快速刷新都监听那些类型的文件。
exclude设置快速刷新不监听哪些类型的文件。
fastRefreshtrue设置是否启用快速刷新。
jsxRuntimeautomatic设置Vite使用什么方式处理JSX文件。
jsxImportSourcereact设置用于处理JSX的工厂方法。要求jsxRuntime需要为automatic。
babel设置Babel的自定义配置。

其实在React构建插件中，最为常用的配置项只有两个：jsxImportSource和babel。

jsxImportSource用于设置处理JSX文件的解释器，在默认情况下，JSX文件都是由React自身提供的解释器解释的。但是在使用了一些特殊的框架以后，这些框架会要求使用其特殊的解释器，例如Emotion库就要求使用@emotion/react来对使用了Emotion提供的特殊语法的JSX进行解析。

babel用于设置Babel转译器的配置，例如Babel处理插件加载和配置。

比如当使用Emotion的时候，此时Vite的配置文件可能就是下面这个样子。

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

export default defineConfig({
  plugins: [
    react({
      jsxImportSource: '@emotion/react',
      babel: {
        plugins: ['@emotion/babel-plugin']
      }
    })
  ]
});