React 优化利器：手动添加 Vite.js 提升你的开发体验

2024-03-08 19:16:38

手动添加 Vite.js 来提升你的 React 开发体验

引言

作为一名 React 开发人员，使用像 Vite 这样的模块打包工具至关重要。它可以极大地提高你的应用程序性能，并优化你的开发流程。本指南将详细介绍如何在不创建 Vite 项目的情况下手动添加 Vite，以及解决你在运行应用程序时可能遇到的常见问题。

手动安装和配置 Vite

1. 安装 Vite 和 Vite React 插件

通过以下命令在你的项目目录中安装 Vite 和 Vite React 插件：

npm install vite @vite/plugin-react

2. 配置 Vite

在你的 package.json 文件中添加以下内容：

{
  "type": "module",
  "scripts": {
    "build": "vite build"
  },
  "dependencies": {
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.1.6"
  }
}

解决常见错误

1. 未期望的 MIME 类型

确保在你的 index.html 文件中，index.jsx 文件的 type 属性设置为 "module"：

<script src="scripts/index.jsx" type="module"></script>

2. 缺少 "start" 脚本

在你的 package.json 文件中，添加一个 "start" 脚本：

"scripts": {
  "start": "vite"
}

3. 无法找到模块

确认 scripts 目录包含你的 index.jsx 文件，并检查 index.html 文件中 index.jsx 文件的路径是否正确。

运行你的应用程序

在解决上述错误后，你可以通过运行以下命令启动你的应用程序：

npm run start

这将启动 Vite 开发服务器，你可以在浏览器中通过 localhost:3000 访问你的应用程序。

示例代码

index.jsx

import Header from "./scripts/Header.js";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Page />);

function Page() {
  return (
    <div>
      <Header />
      {/* <MainContent>
        <Card />
      </MainContent>
      <Footer /> */}
    </div>
  );
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  

  <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div> 
  <script src="scripts/index.jsx" type="module"></script>       
</body>
</html>

package.json

{
  "type": "module",
  "scripts": {
    "build": "vite build",
    "start": "vite"
  },
  "dependencies": {
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.1.6"
  }
}