Panduan pemula untuk menggunakan Vite dengan React

pengenalan

Apabila memulakan projek React baharu, memilih alatan yang betul boleh memberi kesan besar pada aliran kerja anda. Walaupun alatan seperti Webpack telah digunakan secara meluas selama bertahun-tahun, pilihan yang lebih baharu seperti Vite menawarkan alternatif yang lebih pantas dan cekap.

Vite, dibangunkan oleh Evan You (pencipta Vue.js), direka untuk menyampaikan persekitaran pembangunan sepantas kilat. Ia melakukan ini dengan menyediakan fail melalui modul ES asli dan menggunakan pelayan pembangunan yang dioptimumkan. Ini menghasilkan masa permulaan pelayan yang lebih cepat dan pembangunan yang lebih responsif.

React, salah satu perpustakaan paling popular untuk membina antara muka pengguna, berfungsi dengan lancar dengan Vite. Seni bina berasaskan komponennya sesuai untuk membangunkan aplikasi satu halaman dinamik (SPA). Inilah sebabnya Vite ialah pilihan yang bagus untuk projek React:

• Mula Pelayan Segera: Tidak seperti pengikat tradisional, pelayan pembangunan Vite bermula hampir serta-merta dengan menyediakan fail sebagai modul ES asli, mengelakkan penggabungan semasa pembangunan.

• Fast Hot Module Replacement (HMR): HMR Vite adalah sangat pantas, membolehkan anda melihat perubahan dalam komponen React anda hampir serta-merta, yang mempercepatkan pembangunan.

• Binaan Pengeluaran Dioptimumkan: Untuk pengeluaran, Vite menggunakan Rollup untuk mengoptimumkan himpunan anda. Ia termasuk ciri seperti pemisahan kod automatik, yang meningkatkan masa muat apl anda.

• Sokongan Pembangunan Moden: Vite berfungsi dengan baik dengan alatan JavaScript moden seperti TypeScript, JSX dan prapemproses CSS seperti Sass, memberikan pengalaman pembangunan termaju di luar kotak.

Dalam blog ini, kami akan membimbing anda melalui penyediaan projek React dengan Vite, meneroka struktur projek dan menunjukkan kepada anda cara bekerja dengan aset dan menggunakan apl anda. Pada akhirnya, anda akan melihat cara Vite boleh meningkatkan pengalaman pembangunan React anda.

Apa itu Vite?

Vite ialah alat binaan moden yang direka untuk kelajuan dan kecekapan, terutamanya apabila bekerja dengan rangka kerja JavaScript seperti React. Dibangunkan oleh Evan You, pencipta Vue.js, Vite menonjol kerana keupayaannya untuk menyampaikan pengalaman pembangunan yang pantas dan diperkemas.

Ciri-ciri Utama Vite

1. Mula Pelayan Segera: Vite menyediakan fail melalui modul ES asli, membenarkan pelayan pembangunan bermula hampir serta-merta, walaupun untuk projek besar.

2. Fast Hot Module Replacement (HMR): HMR Vite sangat pantas, membolehkan kemas kini hampir serta-merta pada komponen React anda semasa anda membangun.

3. Binaan Dioptimumkan: Vite menggunakan Rollup untuk binaan pengeluaran, memastikan penggabungan yang cekap dengan ciri seperti pemisahan kod dan gegaran pokok.

4. Sokongan JavaScript Moden: Vite hadir dengan sokongan terbina dalam untuk ciri JavaScript terkini, termasuk TypeScript, JSX dan prapemproses CSS seperti Sass.

Vite lwn. Webpack

Walaupun Webpack telah menjadi pilihan popular selama bertahun-tahun, ia selalunya memerlukan konfigurasi yang kompleks dan boleh menjadi lebih perlahan semasa pembangunan disebabkan oleh proses penggabungannya. Sebaliknya, Vite memudahkan proses persediaan dan melangkau penggabungan semasa pembangunan, membawa kepada masa mula pelayan dan HMR yang lebih pantas. Binaan pengeluaran Vite juga sangat dioptimumkan, sama seperti Webpack, tetapi dengan konfigurasi yang lebih mudah.

Mengapa Menggunakan Vite dengan React?

1. Kelajuan: Permulaan pelayan pantas Vite dan HMR memudahkan untuk membangunkan aplikasi React tanpa menunggu proses penggabungan yang lama.

2. Kesederhanaan: Persediaan Vite yang mudah digunakan membolehkan anda menumpukan pada membina komponen React anda daripada mengkonfigurasi alatan binaan.

3. Kecekapan: Vite memastikan apl React anda bukan sahaja pantas dibangunkan tetapi juga dioptimumkan untuk pengeluaran dengan usaha yang minimum.

Vite menawarkan alternatif yang lebih moden dan cekap kepada pengikat tradisional seperti Webpack, menjadikannya sangat sesuai untuk projek React yang mengutamakan kelajuan dan kesederhanaan.

Menyediakan Persekitaran Pembangunan

Sebelum menyelam ke dalam Vite dengan React, anda perlu memastikan bahawa anda telah memasang Node.js dan npm pada sistem anda. Jika anda belum memasangnya, ikut langkah di bawah untuk bermula.

Memasang Node.js dan npm

Untuk memasang Node.js dan npm, lawati tapak web rasmi Node.js dan muat turun versi stabil terkini. Setelah dipasang, anda boleh mengesahkan pemasangan dengan menjalankan arahan berikut dalam terminal anda:

node -v
npm -v

Arahan ini harus memaparkan versi Node.js dan npm yang dipasang, mengesahkan bahawa ia telah disediakan dengan betul.

Memulakan Projek Vite Baharu

Dengan Node.js dan npm sedia, anda kini boleh membuat projek React baharu menggunakan Vite. Vite menyediakan arahan mudah untuk menyediakan projek baharu dengan cepat. Buka terminal anda dan jalankan arahan berikut:

npm create vite@latest my-react-app --template react
cd my-react-app
npm install

• npm create vite@latest my-react-app --template react: Perintah ini memulakan projek Vite baharu dengan templat React. Gantikan aplikasi-my-react dengan nama projek yang anda inginkan.
• cd my-react-app: Navigasi ke dalam direktori projek anda yang baru dibuat.
• pemasangan npm: Pasang kebergantungan yang diperlukan untuk projek React anda.

Menjalankan Pelayan Pembangunan

Setelah projek anda disediakan dan kebergantungan dipasang, anda boleh memulakan pelayan pembangunan. Pelayan Vite adalah pantas, dan anda akan melihat seberapa cepat ia bermula:

npm run  dev

Menjalankan arahan ini akan memulakan pelayan pembangunan Vite dan membuka aplikasi React baharu anda dalam pelayar web lalai anda. Aplikasi akan dimuat semula secara automatik semasa anda membuat perubahan pada kod, terima kasih kepada ciri Penggantian Modul Panas (HMR) Vite yang pantas.

Menjalankan arahan ini akan memulakan pelayan pembangunan Vite dan membuka aplikasi React baharu anda dalam pelayar web lalai anda. Aplikasi akan dimuat semula secara automatik semasa anda membuat perubahan pada kod, terima kasih kepada ciri Penggantian Modul Panas (HMR) Vite yang pantas.

Memahami Struktur Projek

Vite menyediakan struktur projek yang ringkas dan teratur. Berikut ialah ikhtisar ringkas fail dan folder utama:

• index.html: Titik masuk permohonan anda. Vite menyuntik skrip anda ke dalam fail ini.
• src/main.jsx: Fail JavaScript utama tempat aplikasi React anda bermula. Ia biasanya menjadikan komponen akar (App.jsx) ke dalam DOM.
• src/App.jsx: Komponen React utama aplikasi anda. Anda boleh mula membina UI anda di sini.
• vite.config.js: Fail konfigurasi Vite yang membolehkan anda menyesuaikan proses binaan anda, menambah pemalam dan banyak lagi.

Struktur ini direka bentuk untuk menjadi minimum tetapi berkuasa, memberikan anda asas yang kukuh untuk mula membina aplikasi React anda tanpa kerumitan yang tidak perlu. Anda boleh mengembangkan dan menyesuaikan struktur dengan mudah sambil projek anda berkembang.

Memahami Struktur Projek

Apabila anda memulakan projek React menggunakan Vite, ia mewujudkan struktur projek yang bersih dan minimum. Struktur ini direka bentuk untuk membantu anda bermula dengan cepat tanpa overhed fail yang tidak perlu atau konfigurasi kompleks. Mari pecahkan fail dan folder utama yang dibuat oleh Vite untuk membantu anda memahami persediaan.

my-app
├── node_modules
├── src
├── .eslintrc.cjs
├── index.html
├── README.md
├── package.json
└── vite.config.js

Pecahan Fail dan Folder Utama

1. index.html: Fail ini ialah titik masuk aplikasi anda dan terletak dalam direktori akar. Tidak seperti pengikat tradisional, Vite menyediakan terus fail HTML ini semasa pembangunan. Di sinilah aplikasi React anda dipasang dan Vite menyuntik skrip yang diperlukan untuk memuatkan apl itu.

2. src/: Folder src mengandungi semua kod aplikasi anda.

3. main.jsx: Ini ialah titik masuk utama untuk apl React anda. Ia mengimport React, memaparkan komponen akar (App.jsx) dan melampirkannya pada elemen #root dalam fail index.html.

4. App.jsx: Ini ialah komponen akar aplikasi anda, tempat anda akan mula membina UI anda. Anda boleh mengubah suai fail ini untuk menambah lebih banyak komponen apabila projek anda berkembang.

5. vite.config.js: Fail ini mengandungi konfigurasi Vite. Ia membolehkan anda menyesuaikan gelagat Vite, menambah pemalam atau mengubah suai proses binaan, tetapi untuk kebanyakan projek kecil, anda mungkin tidak perlu menyentuh fail ini.

Fail Utama

1. index.html : Fail HTML tempat apl React anda disuntik. Ia mengandungi satu
   elemen dengan id="root" tempat apl React akan dipasang.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite React App</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

1. src/main.jsx Titik masuk JavaScript utama untuk aplikasi React anda. Ia menjadikan komponen Apl ke dalam div #root index.html.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

1. src/App.jsx : Komponen utama apl React anda. Di sinilah anda akan mula membina UI anda. Secara lalai, ia termasuk komponen React yang mudah, tetapi anda boleh mengubah suainya agar sesuai dengan keperluan anda.

import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to Vite + React!</h1>
    </div>
  );
}

export default App;

Mengubah suai App.jsx untuk Mencipta Komponen Reaksi Mudah

Mari ubah suai komponen App.jsx lalai untuk mencipta komponen React mudah yang memaparkan senarai item:

import React from 'react';

function App() {
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <div>
      <h1>Simple List with Vite and React</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Dalam contoh ini:

• We define an array items with a few sample items.
• We use the map() function to iterate over the items array and render each item as a list item (
• ).

This project structure offers flexibility and simplicity, allowing you to grow your application easily as you continue development.

Working with Vite in a React Project

Vite simplifies the process of working with assets, styles, and offers fast feedback during development through Hot Module Replacement (HMR). Let’s walk through how to handle these features in your Vite-React project.

Importing and Using Assets (Images, Styles)

Vite allows you to easily import assets such as images or CSS files directly into your React components, with the benefit of bundling them efficiently during the build.

import React from 'react';
import logo from './assets/logo.png'; // Importing an image

function App() {
  return (
    <div>
      <img src={logo} alt="App Logo" />
      <h1>Welcome to Vite React App!</h1>
    </div>
  );
}

export default App;

In this example, Vite processes the logo.png image file and ensures it’s bundled efficiently when you build the project. During development, the image is served directly without bundling, contributing to faster reload times.

import React from 'react';
import './App.css'; // Importing a CSS file

function App() {
  return (
    <div className="app-container">
      <h1>Welcome to Vite React App!</h1>
    </div>
  );
}

export default App;

How Vite Handles Hot Module Replacement (HMR)

One of Vite’s standout features is its fast Hot Module Replacement (HMR). HMR allows you to see changes in your application instantly without a full page reload. When you modify a file, Vite only updates the specific module that was changed, maintaining the application’s state.

For example, if you update a React component:

import React from 'react';

function App() {
  return (
    <div>
      <h1>Welcome to the updated Vite React App!</h1> {/* Change the text */}
    </div>
  );
}

export default App;

Upon saving the file, Vite’s HMR immediately updates the UI without a full page reload. This speeds up the development process significantly, especially when you are working on UI components or tweaking styles.

Troubleshooting Common Issues

While Vite generally offers a smooth development experience, you might still run into a few common issues when using it with React. Here are some of those issues and how to fix them, along with tips for optimizing performance and build times.

1. Error: "Failed to resolve module"

   This is a common issue that occurs when Vite cannot resolve a module you’re trying to import, especially when dealing with third-party libraries or incorrect paths.
   Solution:

• Double-check the import paths in your code. Ensure you are importing the correct file or module.
• For third-party libraries, try reinstalling the dependencies:

  npm install

• If the issue persists, clear Vite’s cache and restart the server
  

  rm -rf node_modules/.vite
  npm run dev
  

1. Error: "React Refresh failed" Vite uses React Fast Refresh to enable Hot Module Replacement (HMR). Sometimes, this can fail, particularly when the React version is mismatched or there’s a configuration issue.

Solution:

• Make sure that you're using a supported version of React (17.x or later).

• Ensure that @vitejs/plugin-react is correctly installed and added to your vite.config.js file:
  

npm install @vitejs/plugin-react --save-dev

In vite.config.js:

import react from '@vitejs/plugin-react';

export default {
  plugins: [react()],
};

• Restart your Vite development server after applying these fixes.

1. Assets Not Loading After

   If assets like images, fonts, or other static files are not loading properly after building the app, it’s often due to incorrect asset paths.

Solution:

• Make sure that you're using relative paths for your assets. For example, use ./assets/logo.png instead of /assets/logo.png.

• Check yourvite.config.js for the correct base path. If your app is deployed in a subdirectory, you may need to set the base option:
  

  export default {
  base: '/subdirectory/',
  };
  

Following these troubleshooting steps should help you resolve common issues and ensure your Vite + React project runs smoothly.

Conclusion

In this guide, we walked through setting up a React project with Vite, explored its project structure, imported assets, and styles, and highlighted how Vite's fast Hot Module Replacement (HMR) enhances development. You’ve also learned some common troubleshooting tips and optimizations for build performance.

Vite’s speed and simplicity make it a powerful tool, whether you’re working on small projects or scaling up to larger ones. As you continue to explore Vite, dive into its advanced features, such as plugins and environment-specific configurations, to make your development experience even better.

Atas ialah kandungan terperinci Panduan pemula untuk menggunakan Vite dengan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!