Початок роботи з мікрофронтендами за допомогою Vite, React та Vue

Мікрофронтенди набирають популярність. Однак багато онлайн-статей і прикладів у репозиторіях, таких як @module-federation/vite і деякі плагіни Module Federation, надають базові приклади, які не охоплюють реальні задачі, як-от завантаження ресурсів або рендеринг компонента з одного фреймворка в іншому додатку. У цій статті ми навчимося, як почати розробку мікрофронтендів за допомогою Vite як бандлера, з React як віддаленим додатком і Vue як хостом.

Ви можете знайти остаточний код тут.

Хоча ви можете додати конфігурацію до існуючого проєкту, ми почнемо з нуля.

Налаштування віддаленого додатку на React

Перш за все, давайте встановимо залежності для віддаленого додатку на React:

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

Далі створимо кілька компонентів — як простих, так і з пропсами.

// Navbar  
import { Link } from "react-router";  

const Navbar = () => {  
 return (  

Home    Products    
    );   };      export default Navbar;      // Card   import { useState } from "react";      interface Props {    img: string;    title: string;    description: string;   }      const Card = ({ img, title, description }: Props) => {    const [isSaved, setSaved] = useState(false);       return (    
{title}
{description}
 setSaved(!isSaved)}>    {isSaved ? "Unsave" : "Save"}        
    );   };      export default Card; ```  Далі додамо маршрутизацію.  ``` // App      
} />    } />           
 ```  Тепер у нас є робочий додаток з двома маршрутами. Запустіть наступну команду, щоб перевірити, чи працює він:  ``` npm run dev ```  ![pic](https://drive.javascript.org.ua/fdc874aa811_CIeX3dgArNvvxGPev6FGmQ_gif); ```  Тепер налаштуємо конфігурацію Vite для віддаленого додатку.
Оновіть файл `vite.config.js` наступним чином:

// vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { federation } from "@module-federation/vite";
import { dependencies } from "./package.json";

// https://vite.dev/config/
export default defineConfig({
plugins: [
react(),
federation({
name: "remote-app",
filename: "remoteEntry.js",
exposes: {
"./Navbar": "./src/components/renderNavbar.tsx",
"./Card": "./src/components/renderCard.tsx",
},
shared: {
react: { requiredVersion: dependencies.react, singleton: true },
"react-dom": {
requiredVersion: dependencies["react-dom"],
singleton: true,
},
"react-router": {
requiredVersion: dependencies["react-router"],
singleton: true,
},
},
}),
],
build: {
target: "esnext",
rollupOptions: {
output: {
assetFileNames() {
return "[name][extname]";
},
},
},
},
});
```

Далі додайте скрипт для запуску в package.json:

{  
...  
 "scripts": {  
 ...  
 "vmf": "npm run build && vite preview --port 5172"  
 }  
...  
}

npm run vmf

Не забувайте завжди будувати і запускати віддалений додаток перед хостом.

Налаштування хосту Vue додатку

Тепер давайте додамо хост додаток на Vue:

npm create vite@latest vue-app -- --template vue-ts  
cd vue-app  
npm install  
npm install @module-federation/vite --save-dev

Оновіть файл vite.config.js для хостового додатку:

// vite.config.js  

import { defineConfig } from "vite";  
import vue from "@vitejs/plugin-vue";  
import { federation } from "@module-federation/vite";  

// https://vite.dev/config/  
export default defineConfig({  
 plugins: [  
 vue(),  
 federation({  
 name: "host-app",  
 remotes: {  
 remote: {  
 entry: "http://localhost:5172/remoteEntry.js", // можна використовувати змінні середовища  
 type: "module",  
 name: "remote",  
 },  
 },  
 }),  
 ],  
 build: {  
 target: "esnext",  
 },  
});

Якщо ви використовуєте Nuxt, ви можете використовувати той самий плагін і налаштувати його під ключем vite у файлі nuxt.config.js.

Останній крок — додайте конфігурацію скрипта в package.json:

{  
...  
 "scripts": {  
 ...  
 "vmf": "NODE_OPTIONS=--experimental-vm-modules npm run dev --experimental-vm-modules --port=5173"  
 }  
...  
}

Імпорт та монтування компонентів React в Vue

Тепер імпортуємо компоненти React і монтуємо їх у додатку на Vue:

// App.vue  

Запустіть додаток Vue локально:

npm run vmf

Тепер ви повинні побачити завантажену панель навігації та картку, а також основний контейнер, стилізований з віддаленого додатку.

Ви можете застосувати цю техніку для рендерингу окремих компонентів, сторінок або навіть усього додатку React у хості Vue або навпаки. Сподіваюся, цей посібник допоможе вам почати роботу з Module Federation. Дайте знати, якщо я щось пропустила!

Перекладено з: Getting Started with Micro-Frontends Using Vite, React, and Vue