Федерация модулей Webpack 5 вызывает революцию в микроинтерфейсах?

внешний интерфейс

Федерация модулей Webpack 5 обеспечивает возможность загрузки частично скомпилированного кода, что кажется стандартной реализацией для архитектур микроинтерфейса.

введение

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

Объединение модулей может зависеть от удаленного модуля, и эта зависимость вступает в силу во время выполнения и не влияет на время компиляции. Следовательно, этот удаленный зависимый модуль может быть независимым от микроинтерфейса модулем. При этом каждый независимый модуль может объявить общую библиотеку зависимостей, что также позволяет избежать избыточности и конфликта зависимых пакетов между независимыми модулями.

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

Пример

Этот пример сначала содержит пустую оболочку, охватывающую два модуля (Home, Flights), это приложение с пустой оболочкой может загружать каждый модуль микроинтерфейса по запросу.

Следующее является частью модуля микроинтерфейса — Flights, который фактически может работать независимо.

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

федерация модулей

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

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

import('http://other-microfrontend');

Такая реализация должна полагаться на ручное введение внешнего JavaScript, который будет изменен в Webpack 5.

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

Реализация хост-системы

Хост-система используется для импорта удаленных модулей. В этом примере будет загружен удаленный модульmfe1/component, mfe1 — это сконфигурированное имя удаленного модуля, а компонент — это предоставленный в нем файл.

const rxjs = await import('rxjs');

const container = document.getElementById('container');
const flightsLink = document.getElementById('flights');

rxjs.fromEvent(flightsLink, 'click').subscribe(async _ => {
    const module = await import('mfe1/component');
    const elm = document.createElement(module.elementName);
    […]    
    container.appendChild(elm);
});

В конфигурации Webpack используйтеModuleFederationPluginМожет использоваться для объявления используемой информации об удаленном модуле.

const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

[…]

plugins: [
  new ModuleFederationPlugin({
    name: "shell",
    library: { type: "var", name: "shell" },
    remotes: {
      mfe1: "mfe1"
    },
    shared: ["rxjs"]
  })
]

Таким образом, удаленный модульmfe1Как только объявление завершено, Webpack будет игнорировать ссылки, связанные с mfe1, на этапе компиляции, чтобы избежать его упаковки.

В общем вы можете определить зависимые общедоступные библиотеки, этот пример — rxjs. Это гарантирует, что все приложение загрузит библиотеку rxjs только один раз, в противном случае общая библиотека будет упакована в хост-приложение и будет неоднократно появляться в каждом подмодуле.

Конечно, общие общедоступные библиотеки должны быть гарантированно одной и той же версии. В то же время хост-систему необходимо загрузить динамическим импортом:

import * as rxjs from 'rxjs';

Реализация удаленного модуля

Удаленный модуль также является самостоятельной системой, которая реализована веб-компонентом здесь:

class Microfrontend1 extends HTMLElement {

    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
    }

    async connectedCallback() {
        this.shadowRoot.innerHTML = `[…]`;
    }
}

const elementName = 'microfrontend-one';
customElements.define(elementName, Microfrontend1);

export { elementName };

Конечно, вы можете использовать любую интерфейсную платформу для реализации, а общую библиотеку платформы можно совместно использовать между хостом и удаленными модулями.

В конфиге Webpack удалённого модуля также нужно использоватьModuleFederationPlugin, который предоставляет доступ к модулю.

output: {
      publicPath: "http://localhost:3000/",
      […]
 },
 […]
 plugins: [
    new ModuleFederationPlugin({
      name: "mfe1",
      library: { type: "var", name: "mfe1" },
      filename: "remoteEntry.js",
      exposes: {
        component: "./mfe1/component"
      },
      shared: ["rxjs"]
    })
]

name определяет имя конфигурации удаленного модуля. Через имя удаленного модуля и имя открытого компонента хост может удаленно ссылаться на зависимости:

import('mfe1/component')

Наконец, хост также должен знать URL-адрес удаленного модуля, чтобы фактически импортировать его.

Хост подключается к удаленному модулю

Хост-системе необходимо загрузить файл удаленной записи, который упакован удаленным модулем через ModuleFederationPlugin.

Имя файла записи определяется в конфигурации имени файла, которая в этом примере определена как «remoteEntry.js». URL-адрес модуля микроинтерфейса определяется в свойстве publicPath.

Введите файл записи удаленного модуля в хост-систему:

<script src="http://localhost:3000/remoteEntry.js"></script>

В этом примере мы предоставляем две системы

  • Хост-система: адрес localhost:5000, и файл записи удаленного модуля будет загружен.
  • Удаленный модуль: адрес localhost:3000, и предоставляется компонент удаленного модуля.

В заключение

Механизм объединения модулей в Webpack 5 обязательно внесет революционные изменения в микроинтерфейсы. Удаленные модули могут быть скомпилированы независимо, а затем загружены во время выполнения, а также могут быть определены общие библиотеки, чтобы избежать повторной загрузки.

Webpack 5 все еще находится в стадии бета-тестирования, но мы уже можем предвидеть, что в ближайшем будущем федерация модулей станет одним из стандартных решений в микроинтерфейсных архитектурах.

«Daddy Code Farmer» занимается исследованиями и разработками в Интернете более 10 лет и имеет опыт работы с ИТ-компаниями в стране и за рубежом, такими как IBM, SAP, Lufax и Ctrip. передняя техническая команда, связанная с питанием в Meituan, и регулярно делится информацией о крупномасштабных передовых технологиях и инвестициях.Размышления и резюме по управлению финансами и личному росту.

Категории