vite 创建react项目 swc

要使用 Vite 创建 React 项目并使用 swc 作为转译工具，你可以按照以下步骤进行操作：

1. 确保你已经安装了 Node.js 和 npm。你可以在终端中运行以下命令来检查是否已经安装：

   node -v
   npm -v

2. 安装 Vite 脚手架工具。在终端中运行以下命令：

   npm install -g create-vite

3. 创建一个新的 Vite 项目。在终端中运行以下命令：

   create-vite my-react-app --template react

4. 进入新创建的项目目录。在终端中运行以下命令：

   cd my-react-app

5. 安装 swc 和相关的插件。在终端中运行以下命令：

   npm install --save-dev @swc/core @swc/cli

6. 配置 Vite 使用 swc 进行转译。在项目根目录下创建一个名为 `vite.config.js` 的文件，并将以下代码添加到文件中：

   const { defineConfig } = require('vite');

   module.exports = defineConfig({
     esbuild: {
       jsxFactory: 'React.createElement',
       jsxFragment: 'React.Fragment',
       jsxInject: `import React from 'react'`
     },
     plugins: [
       {
         name: 'swc-loader',
         transform(code, id) {
           if (/\.tsx?$/.test(id)) {
             const { transformSync } = require('@swc/core');
             const result = transformSync(code, {
               module: {
                 type: 'commonjs'
               },
               isModule: true,
               jsx: {
                 factory: 'React.createElement',
                 fragment: 'React.Fragment',
                 pragmaFrag: 'React.Fragment'
               }
             });
             return {
               code: result.code,
               map: result.map
             };
           }
         }
       }
     ]
   });

7. 启动开发服务器。在终端中运行以下命令：

   npm run dev

现在，你就可以在浏览器中访问 `http://localhost:3000` 来查看并开发你的 React 应用了！该项目使用 swc 作为转译工具，以提供更快的构建速度和更小的包大小。