找不到 @vitejs/plugin-react-refresh 插件

很抱歉，我之前给出的示例有误。在Vite中，默认情况下已经支持了JSX的转换，不需要额外的插件。你可以直接编写带有JSX语法的文件，并将其保存为`.jsx`或`.tsx`文件。Vite会自动将其转换为普通的JavaScript文件（`.js`或`.ts`）。

以下是一个简单的示例：

// App.jsx
import React from 'react';

function App() {
  return <div>Hello, World!</div>;
}

export default App;

Vite会将上述代码转换为：

// App.js
import React from 'react';

function App() {
  return React.createElement("div", null, "Hello, World!");
}

export default App;

你可以像往常一样使用Vite命令（如`npm run dev`）来启动开发服务器，并且Vite会自动处理JSX转换。

相关问题

@pmmmwh/react-refresh-webpack-plugin 如何配置 webpack

@pmmmwh/react-refresh-webpack-plugin 是一个用于 Webpack 的插件，用于实现 React 组件的无需刷新热更新。要在 Webpack 中配置该插件，您需要执行以下步骤：

1. 安装 @pmmmwh/react-refresh-webpack-plugin 和 react-refresh 包，可以使用 npm 或 yarn 命令进行安装：

   npm install @pmmmwh/react-refresh-webpack-plugin react-refresh --save-dev

或

   yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh --dev

2. 在 Webpack 配置文件中，导入插件和 ReactRefreshWebpackPlugin：

   const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');

3. 将 ReactRefreshWebpackPlugin 插件添加到 plugins 数组中：

   plugins: [
     new ReactRefreshWebpackPlugin()
   ],

4. 如果您使用的是 TypeScript，则需要在 ts-loader 选项中添加 react-refresh-typescript：

   module: {
     rules: [
       {
         test: /\.tsx?$/,
         use: [
           {
             loader: 'ts-loader',
             options: {
               getCustomTransformers: () => ({
                 before: [require('react-refresh-typescript')()]
               })
             }
           }
         ],
         exclude: /node_modules/
       }
     ]
   }

5. 在 devServer 中启用 hot 和 hotOnly 选项：

   devServer: {
     hot: true,
     hotOnly: true
   }

完成以上配置后，您就可以使用 @pmmmwh/react-refresh-webpack-plugin 实现 React 组件的无需刷新热更新了。

@pmmmwh/react-refresh-webpack-plugin webpack 如何配置

要在 Webpack 中配置 `@pmmmwh/react-refresh-webpack-plugin` 插件，您需要进行以下步骤：

1. 首先，安装 `@pmmmwh/react-refresh-webpack-plugin` 插件和 `react-refresh` 包，可以使用 npm 或 yarn 命令进行安装：

   npm install @pmmmwh/react-refresh-webpack-plugin react-refresh --save-dev

或

   yarn add @pmmmwh/react-refresh-webpack-plugin react-refresh --dev

2. 在 webpack 配置文件中，导入插件和 `ReactRefreshWebpackPlugin`：

   const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
   const ReactRefreshTypeScript = require('react-refresh-typescript');

3. 将 `ReactRefreshWebpackPlugin` 插件添加到 plugins 数组中：

   plugins: [
     new ReactRefreshWebpackPlugin()
   ],

4. 如果使用 TypeScript，需要添加 `ReactRefreshTypeScript` 到 ts-loader 的选项中：

   module: {
     rules: [
       {
         test: /\.tsx?$/,
         use: [
           'ts-loader',
           {
             loader: 'react-refresh-typescript',
             options: {
               // disable type checker - we will use it in fork plugin
               transpileOnly: true
             }
           }
         ],
         exclude: /node_modules/
       }
     ]
   },

5. 最后，在 devServer 中启用 `hot` 和 `hotOnly` 选项：

   devServer: {
     hot: true,
     hotOnly: true
   }

完成以上配置后，您可以在开发模式下使用 `@pmmmwh/react-refresh-webpack-plugin` 插件了。