13.10.2023 в 21:28

Микрофронтенды React с использованием Vite

Исходный код этой статьи доступен на GitHub.

Микрофронтенды: Расширение возможностей веб-разработки с помощью Vite и Module Federation

В этой статье мы рассмотрим концепцию микрофронтендов - мощный архитектурный подход для веб-приложений. Микрофронтенды позволяют разделить код фронтенда на более мелкие, независимо разрабатываемые и развертываемые блоки. Такие блоки, называемые микрофронтендами, дают множество преимуществ, включая повышение скорости разработки, масштабируемость и гибкость. Микрофронтенды позволяют разным командам работать над отдельными частями фронтенда, сохраняя при этом интеграцию через изолирующий слой, что способствует управлению сложностью и автономностью разработки фронтенда.

Что такое микрофронтенд?

Микрофронтенд - это архитектурный подход к веб-приложениям, при котором код фронтенда разделяется на более мелкие, независимо разрабатываемые и развертываемые части, называемые микрофронтендами. Такой подход повышает скорость разработки, масштабируемость и гибкость, позволяя разным командам работать над отдельными частями фронтенда, сохраняя при этом интеграцию через изолирующий слой. Это способ управления сложностью и повышения автономности разработки фронтенда.

Module Federation

Module Federation - это ключевая технология, позволяющая JavaScript-приложению динамически загружать код из другого приложения, разделяя при этом зависимости. Если в приложении, потребляющем объединенный модуль, отсутствует необходимая зависимость, Webpack (базовая технология) автоматически подбирает недостающую зависимость из источника объединенной сборки. Это позволяет эффективно использовать общие библиотеки в нескольких микрофронтендах.

Почему именно Vite?

Изначально Module Federation был представлен в Webpack, однако ландшафт разработки JavaScript изменился. Vite стал переломным моментом, обеспечив молниеносное время сборки. Сочетание Vite и Module Federation открывает огромные возможности для быстрой и эффективной разработки микрофронтендов.

Создание микрофронтенда с использованием Vite + React

Создание микрофронтенда обычно включает в себя две основные части:

Хост-приложение: Это основное приложение, с которым взаимодействуют пользователи. Оно служит контейнером для микрофронтендов.
Удаленное приложение: Это собственно микрофронтенды, которые выступают в качестве строительных блоков для хост-приложения.

Теперь, когда у нас есть представление о технологиях, которые мы будем использовать, перейдем к реализации.

Настройка хост-приложения

Чтобы создать хост-приложение с использованием Vite и React, выполните следующую команду:

# Using npm 6.x
npm create vite@latest host-app --template react

# Using npm 7+, add an extra double-dash:
npm create vite@latest host-app -- --template react

Настройка удаленного приложения

Для создания удаленного приложения выполните следующую команду:

npm create vite@latest todo-components -- --template react

В результате будут созданы две папки: host-app и todo-components. Далее установите зависимости для обоих приложений:

npm install

Создание компонентов в удаленном приложении

В приложении todo-components создайте следующие компоненты:

// components/List.jsx
import React from "react";

const List = (props) => {
  const { items } = props;
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );
};

export default List;

// components/Input.jsx
import React from "react";

const Input = (props) => {
  const { value, onChange, onSubmit } = props;
  return (
    <form
      onSubmit={(e) => {
        e.preventDefault();
        onSubmit(e);
      }}
    >
      <div className="flex-row">
        <input
          type="text"
          value={value}
          onChange={(e) => onChange(e.target.value)}
        />
        <button type="submit">Add</button>
      </div>
    </form>
  );
};

export default Input;

Теперь, когда компоненты готовы, внесите следующие изменения в файл App.jsx:

// App.jsx
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import Input from "./components/Input";
import List from "./components/List";

function App() {
  const [count, setCount] = useState(0);

  return (
    <>
      <Input value={count} onChange={setCount} onSubmit={console.log} />
      <List items={["Learn React", "Learn Vite", "Make an awesome app"]} />
    </>
  );
}

export default App;

Предварительный просмотр удаленного приложения

Для предварительного просмотра компонентов выполните следующую команду в приложении todo-components:

npm run dev

Вы должны увидеть следующий результат.

Добавление Module Federation в удаленное приложение

Теперь добавим Module Federation в приложение todo-components. Сначала установите необходимые зависимости:

npm install @originjs/vite-plugin-federation --save-dev

Далее настройте Module Federation в файле vite.config.js:

// vite.config.js in todo-components
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "todo-components",
      filename: "remoteEntry.js",
      exposes: {
        "./List": "./src/components/List.jsx",
        "./Input": "./src/components/Input.jsx",
      },
      shared: ["react"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",
    minify: false,
    cssCodeSplit: false,
  },
});

В данной конфигурации:

name: Указывает имя удаленного приложения.
filename: Задает имя файла, формируемого Module Federation.
exposes: Перечисляет компоненты, которые должны быть отображены из удаленного приложения.
shared: Объявляет общие зависимости, например React, для оптимизации размера пакета.

Теперь создайте удаленное приложение:

npm run build

В результате в приложении todo-components создается папка dist, содержащая файл remoteEntry.js.

Обслуживание удаленного приложения

Локально обслужите удаленное приложение:

npm run preview

Это обслуживает удаленное приложение на порте 4173.

Добавление Module Federation в хост-приложение

Чтобы использовать компоненты удаленного приложения в главном приложении, настройте Module Federation в файле vite.config.js главного приложения:

// vite.config.js in host-app
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";

export default defineConfig({
  plugins: [
    react(),
    federation({
      name: "host-app",
      remotes: {
        todo_components: "http://localhost:4173/assets/remoteEntry.js",
      },
      shared: ["react"],
    }),
  ],
  build: {
    modulePreload: false,
    target: "esnext",

    minify: false,
    cssCodeSplit: false,
  },
});

В данной конфигурации:

name: Указывает имя хост-приложения.
remotes: Перечисляет удаленные приложения, которые будут использоваться хост-приложением. В данном случае у нас есть одно удаленное приложение "todo_components", и мы указываем URL-адрес его файла remoteEntry.js.
shared: Объявляет общие зависимости, например React, для оптимизации размера пакета.

Использование удаленных компонентов в хост-приложении

Теперь можно импортировать и использовать компоненты удаленного приложения в App.jsx основного приложения:

// App.jsx in host-app
import { useState } from "react";
import List from "todo_components/List";
import Input from "todo_components/Input";

function App() {
  const [newTodo, setNewTodo] = useState("");
  const [todos, setTodos] = useState([]);
  const onSubmit = () => {
    setTodos((prev) => [...prev, newTodo]);
    setNewTodo("");
  };

  return (
    <>
      <Input value={newTodo} onChange={setNewTodo} onSubmit={onSubmit} />
      <List items={todos} />
    </>
  );
}

export default App;

Здесь мы импортируем компоненты из удаленного приложения, используя указанное удаленное имя "todo_components".

Обслуживание хост-приложения

Чтобы обслужить хост-приложение локально, выполните команду:

npm run dev

Теперь вы должны видеть, что компоненты из удаленного приложения без проблем используются в главном приложении.

Заключение

В этой статье мы рассмотрели концепцию микрофронтендов и показали, как создать архитектуру микрофронтенда с использованием Vite и React, дополненную Module Federation. Используя возможности Vite по быстрой сборке и Module Federation по динамической загрузке кода, можно эффективно разрабатывать и масштабировать веб-приложения по модульному принципу. Такой подход позволяет нескольким командам работать над различными частями приложения независимо друг от друга, что способствует гибкости и динамичности разработки внешних компонентов.

Для дальнейшего изучения и применения этих концепций в собственных проектах не стесняйтесь адаптировать и расширять приведенные здесь примеры. Микрофронтенды при разумном использовании могут значительно оптимизировать рабочий процесс веб-разработки.

Источник:

Comment button

#React

722

Войти на сайт