Mikro-Frontends dengan React: Panduan Komprehensif

Apabila aplikasi web berkembang dalam kerumitan, keperluan untuk seni bina berskala dan boleh diselenggara menjadi yang terpenting. Bahagian hadapan mikro menawarkan penyelesaian dengan memecahkan aplikasi bahagian hadapan monolitik kepada bahagian yang lebih kecil dan boleh diurus. Dalam siaran ini, kami akan meneroka konsep bahagian hadapan mikro, cara melaksanakannya menggunakan React dan faedah yang mereka bawa kepada proses pembangunan anda.

Apakah Micro-Frontends?

Halaman mikro memanjangkan seni bina perkhidmatan mikro ke bahagian hadapan. Daripada aplikasi monolitik tunggal, bahagian hadapan mikro membolehkan anda membangun dan menggunakan ciri individu atau bahagian aplikasi anda secara bebas. Setiap pasukan boleh memiliki bahagian khusus aplikasi, yang membawa kepada kebolehskalaan dan kebolehselenggaraan yang lebih baik.

Ciri-ciri Utama Micro-Frontends:

Boleh Digunakan Secara Bebas: Setiap bahagian hadapan mikro boleh dibangunkan, diuji dan digunakan secara bebas.
Teknologi Agnostik: Pasukan boleh memilih teknologi yang berbeza untuk bahagian hadapan mikro yang berbeza, membolehkan fleksibiliti.
Autonomi Pasukan: Pasukan boleh bekerja secara bebas, mengurangkan kebergantungan dan kesesakan.

Mengapa Menggunakan Micro-Frontends?

Skalabiliti: Apabila aplikasi anda berkembang, bahagian hadapan mikro membolehkan anda menskalakan pembangunan merentas berbilang pasukan.
Pembangunan Lebih Pantas: Penggunaan bebas bermakna kitaran keluaran yang lebih pantas dan mengurangkan masa untuk memasarkan.
Kebolehselenggaraan yang dipertingkatkan: Pangkalan kod yang lebih kecil lebih mudah untuk diurus, diuji dan difaktorkan semula.

Melaksanakan Micro-Frontends dengan React

• Pilih Seni Bina Mikro-Frontend Terdapat beberapa pendekatan untuk melaksanakan bahagian hadapan mikro. Berikut ialah dua kaedah popular:

Berasaskan Iframe: Setiap bahagian hadapan mikro dimuatkan dalam iframe. Pendekatan ini memberikan pengasingan yang kuat tetapi boleh membawa kepada cabaran dengan komunikasi dan penggayaan.

JavaScript Bundle: Setiap micro-frontend ialah bundle JavaScript berasingan yang dimuatkan ke dalam satu aplikasi. Pendekatan ini membolehkan integrasi yang lebih baik dan pengurusan negeri dikongsi.

• Menyediakan Aplikasi Mikro-Frontend Mari buat contoh mudah menggunakan pendekatan berkas JavaScript. Kami akan menggunakan Webpack Module Federation, ciri berkuasa yang membolehkan anda berkongsi kod antara aplikasi yang berbeza.

Langkah 1: Buat Dua Aplikasi React
Buat dua aplikasi React yang berasingan, satu untuk hos dan satu untuk bahagian hadapan mikro.

npx create-react-app host-app
npx create-react-app micro-frontend

Langkah 2: Konfigurasi Persekutuan Modul Webpack
Dalam aplikasi bahagian hadapan mikro, pasangkan kebergantungan yang diperlukan:

npx create-react-app host-app
npx create-react-app micro-frontend

Kemudian, ubah suai webpack.config.js untuk mendedahkan komponen bahagian hadapan mikro anda:

npm install --save-dev webpack webpack-cli webpack-dev-server @module-federation/webpack

Dalam apl hos, konfigurasikannya untuk menggunakan bahagian hadapan mikro:

// micro-frontend/webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: "micro_frontend",
      filename: "remoteEntry.js",
      exposes: {
        "./Button": "./src/Button", // Expose the Button component
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

Langkah 3: Muatkan Micro-Frontend
Dalam apl hos anda, kini anda boleh memuatkan komponen bahagian hadapan mikro secara dinamik:

// host-app/webpack.config.js
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // ... other configurations
  plugins: [
    new ModuleFederationPlugin({
      name: "host",
      remotes: {
        micro_frontend: "micro_frontend@http://localhost:3001/remoteEntry.js",
      },
      shared: {
        react: { singleton: true },
        "react-dom": { singleton: true },
      },
    }),
  ],
};

• Jalankan Aplikasi Pastikan anda menjalankan kedua-dua aplikasi pada port yang berbeza. Sebagai contoh, anda boleh menjalankan bahagian hadapan mikro pada port 3001 dan aplikasi hos pada port 3000.

// host-app/src/App.js
import React, { useEffect, useState } from "react";

const App = () => {
  const [Button, setButton] = useState(null);

  useEffect(() => {
    const loadButton = async () => {
      const { Button } = await import("micro_frontend/Button");
      setButton(() => Button);
    };
    loadButton();
  }, []);

  return (
    <div>
      <h1>Host Application</h1>
      {Button ? <Button label="Click Me!" /> : <p>Loading...</p>}
    </div>
  );
};

export default App;

Kini, apabila anda menavigasi ke http://localhost:3000, anda sepatutnya melihat aplikasi hos memuatkan butang dari bahagian hadapan mikro.

Hadapan mikro menyediakan cara yang berkuasa untuk mengurus aplikasi bahagian hadapan yang kompleks dengan memecahkannya kepada bahagian yang lebih kecil dan boleh digunakan secara bebas. Dengan memanfaatkan React dan alatan seperti Webpack Module Federation, anda boleh mencipta seni bina berskala yang meningkatkan autonomi pasukan dan mempercepatkan pembangunan. Semasa anda mempertimbangkan untuk menggunakan bahagian hadapan mikro, pertimbangkan faedah berbanding kerumitan yang diperkenalkan dan pilih pendekatan yang paling sesuai dengan keperluan projek anda.

Atas ialah kandungan terperinci Mikro-Frontends dengan React: Panduan Komprehensif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!