Monorepo dan Micro-Frontends Menggunakan Modul Federation Vite

✨ Pengenalan ✨:

Monorepo

Monorepo ialah repositori tunggal yang menguruskan berbilang projek berkaitan tetapi bebas. Ia menyelaraskan pembangunan dengan mendayakan penggunaan semula kod, memudahkan kebergantungan dan memupuk kerjasama pasukan yang lebih baik berbanding dengan repositori berasingan.

Bahagian Hadapan Mikro

Seni bina aplikasi web bagi bahagian hadapan yang menguraikannya kepada unit yang lebih kecil dan bebas yang boleh digunakan secara individu. Bahagian hadapan mikro boleh dibuat dan digunakan secara bebas daripada asas kod lain, bermakna ia lebih fleksibel dan berskala.

Persekutuan Modul dan Vite

Persekutuan Modul: Ia adalah ciri yang sangat berkuasa dalam Webpack, yang membolehkan pemuatan kod dinamik dari lokasi terpencil.

Vite: Ini adalah alat binaan bahagian hadapan yang lebih moden, satu yang membolehkan permulaan pelayan pembangunan pantas dan penggantian modul panas serta-merta, dengan sokongan hebat untuk ciri JavaScript moden dan memperluaskan fungsinya melalui sistem pemalam .

Masalah yang boleh diselesaikan oleh alat ini ?:

• Penskalaan Pasukan
• Mengurus Ketergantungan
• Meningkatkan Kelajuan Pembangunan

Dengan menggabungkan corak dan alatan ini, seseorang boleh membina aplikasi bahagian hadapan yang boleh skala, boleh diselenggara dan berprestasi tinggi yang memenuhi permintaan pembangunan web moden.

Menggabungkan Monorepos, Micro-Frontends, Persekutuan Modul, dan Vite ??:

Kesan

Dengan menggabungkan teknologi ini, anda mencipta seni bina yang berkuasa dan fleksibel untuk membina aplikasi web berskala besar dan kompleks. Berikut ialah pecahan kesan utama:

• Kebolehskalaan Dipertingkat: Penggunaan bebas dan kemas kini bahagian hadapan mikro dalam monorepo.
• Pengalaman Pembangun yang Dipertingkat: Pembangunan yang lebih pantas dengan Vite dan aliran kerja yang diperkemas.
• Prestasi Dioptimumkan: Pemuatan kod atas permintaan dengan Persekutuan Modul mengurangkan masa pemuatan awal.
• Kebolehselenggaraan yang Lebih Baik: Bahagian hadapan mikro modular meningkatkan organisasi kod dan mengurangkan gandingan.

?? Cukuplah teori ini, mari kita lihat beberapa tindakan! ??

Bagaimana untuk melakukannya?

1: Sediakan Monorepo

Pilih alat pengurusan monorepo seperti Lerna atau Nx. (mari pilih Nx untuk projek demo ini)

• Mari buat folder dan mulakan Nx ruang kerja di sana.

mkdir my-monorepo
cd my-monorepo

2: Pasang Nx Cli:

• Pasang Nx CLI secara global ke dalam sistem anda

npm add --global nx@latest 

• Mulakan Nx ruang kerja

npx create-nx-workspace@latest

• Gunakan Nx CLI untuk menjana aplikasi dan perpustakaan baharu dalam ruang kerja anda

nx g @nx/next:application host-app
.
.
.
nx g @nx/react:application my-remote-app
.
.
.
nx g @nx/react:library my-utils

3: Konfigurasi Vite Dan Laksanakan Persekutuan Modul:

• Pasang pemalam @originjs/vite-plugin-federation dalam setiap vite.config.js micro-frontend.

npm i @originjs/vite-plugin-federation -D

• Buat vite.config.js (jika tidak dibuat oleh Nx) dan konfigurasikannya.
• Melaksanakan pakej persekutuan modul.

Konfigurasi Host-App Vite:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     federation({
      name: 'host-app',
      remoteApp: {},  // add Urls of your remote apps here
     shared: {
        react: {
          singleton: true,
          requiredVersion: '18.2.0',
        },
        'react-dom': {
          singleton: true,
          requiredVersion: '18.2.0',
        },
      },
    }),
  ],
});

Konfigurasi Vite Apl Jauh:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
     react(),
     name: 'my-remote-app', // unique app name for your remote module
     filename: 'remoteEntry.js',
     exposes: {}, // add the path of any components you want to expose to the host app
     shared: {
       react: {
         singleton: true,
         requiredVersion: '18.2.0',
       },
       'react-dom': {
         singleton: true,
         requiredVersion: '18.2.0',
       },
     },
    }),
  ],
});

Struktur Projek anda sepatutnya kelihatan seperti ini

my-monorepo/
├── apps/
│   ├── host-app/
│   │   ├── package.json
│   │   ├── vite.config.js
│   │   ├── src/
│   │   └── ...
│   ├── my-utils/
│   │   ├── package.json
│   │   ├── src/
│   │   └── ...
│   └── my-remote-app/
│       ├── package.json
│       ├── vite.config.js
│       ├── src/
│       └── ...
└── nx.json

? Tahniah, apl anda telah dikonfigurasikan sekarang. ?
Sekarang, teruskan dan buat komponen dan dedahkannya kepada apl hos.

Bagaimana untuk menambah komponen jauh ke hos?

Mari andaikan anda telah mendedahkan komponen sebagai "AppComponent" dan nama jauh anda ialah "remoteApp"

const RemoteComponent = React.lazy(() => import('remoteApp/AppComponent'));

<Suspense fallback={<>Loading....</>}>
  <RemoteComponent />
</Suspense>

*NOTA: * Pastikan anda menambah URL jauh pada fail vite.config.js hos.

Senario Dunia Nyata ??:

Platform e-dagang berskala besar: Pasukan yang sama boleh bekerja pada halaman produk, proses pembayaran dan akaun pengguna secara bebas.
Aplikasi perusahaan: Ciri boleh diuruskan oleh jabatan yang berbeza dalam platform kongsi.
Pasukan yang berbeza boleh membuat dan mengekalkan widget atau papan pemuka individu.

? Lihat kod projek demo saya di sini ??: Projek Monorepo

Kesimpulan

Monorepos, Micro-frontends, Module Federation dan Vite, menggunakan kekuatan semua teknologi di atas, boleh membantu organisasi membina aplikasi web berskala, boleh diselenggara dan berprestasi tinggi yang memenuhi permintaan pembangunan moden dan keperluan perniagaan.

Sumber Tambahan:

Dokumentasi Nx
Dokumentasi Vite
Persekutuan Modul Webpack
Seni Bina Mikro-Frontend

Jangan ragu untuk menghubungi jika anda mempunyai soalan atau memerlukan bantuan dalam melaksanakan persediaan ini untuk projek anda. Mari kita bina sesuatu yang menakjubkan! ?

Atas ialah kandungan terperinci Monorepo dan Micro-Frontends Menggunakan Modul Federation Vite. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!