Передняя микро-практика Single-Spa

JavaScript

задний план

Во внешнем интерфейсе команда внешнего интерфейса часто создает и поддерживает веб-приложение, которое использует REST API для извлечения данных из внутренних служб. Этот подход, если все сделано правильно, может обеспечить отличный пользовательский опыт. Но главный недостаток заключается в том, что одностраничные приложения (SPA) плохо масштабируются и развертываются. В связи с длительным жизненным циклом (3+ года) промежуточных и фоновых приложений, увеличением и изменением участвующих сотрудников и команд и другими характеристиками, после того, как приложение превратилось из обычного приложения в монолит внешнего интерфейса, сопутствующее приложение неподдерживаемая проблема. Этот тип проблем особенно распространен в корпоративных веб-приложениях.

В крупной компании одна-единственная фронтенд-команда может стать узким местом.

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

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

Один спа что?

single spa — это библиотека javascript, которая позволяет множеству небольших приложений сосуществовать в одностраничном приложении. Это https://single-spa.surge.sh/ Веб-сайт представляет собой демонстрационное приложение, которое показывает, что такое отдельное приложение. Идея спа состоит в том, чтобы иметь независимые автономные приложения, составляющие полную страницу. Вместо долгосрочных зависимостей от одной платформы и каждой функции единый спа-центр поможет вам адаптировать их при разработке новых платформ. Короче говоря, это универсальный клей.Использование этой библиотеки позволяет вашему приложению использовать несколько различных технологических стеков (vue, react, angular и т. д.) для синхронной разработки и, наконец, использовать общий маршрут для достижения идеального переключения. Конечно, вы также можете использовать один и тот же стек технологий для разработки в разных командах, вам нужно только использовать эту библиотеку, чтобы интегрировать их вместе и задать разные имена маршрутов.

Как запустить элемент Single spa, создать родительский проект

Первый шаг, создайте новый проект

Измените файл app.vue, чтобы добавить

<div id=“vue”></div>контейнер

Импорт файла установочного пакета

npm install single-spa --save –d

Main.js представляет файл конфигурации

import './single-spa-config.js’

  1. Создать дочерний проект vue-child

Введение в файл пакета

npm install single-spa-vue --save -d

Второй шаг, файл single-spa-config родительского компонента

Во-первых, давайте взглянем на основной API singleSpa.

  • регистрацияЗаявка определение:

registerApplication — это самый важный API, который будет использоваться вашей корневой конфигурацией. Используйте эту функцию для регистрации любого приложения в single-spa. --- Метод для регистрации подпроектов.

appName: имя подпроекта

applicationOrLoadingFn: функция регистрации подпроекта, пользователь должен вернуть Объект жизненного цикла для single-spa. Позже мы познакомимся с механизмом жизненного цикла single-spa.

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

singleSpa.registerApplication('appName’,
 () => System.import('appName’), 
location => location.pathname.startsWith('appName’)
)
  • singleSpa.start: функция запуска

Измените файл single-spa-config родительского контейнера.

  // single-spa-config.js
  import * as singleSpa from 'single-spa'; //导入single-spa
  import axios from 'axios’
  
  /*runScript：一个promise同步方法。可以代替创建一个script标签，然后加载服务*/
  const runScript = async (url) => {
  return new Promise((resolve, reject) => {
  const script = document.createElement('script');
  script.src = url;
  script.onload = resolve;
  script.onerror = reject;
  const firstScript = document.getElementsByTagName('script')[0];
  firstScript.parentNode.insertBefore(script, firstScript);
  });
  };
  singleSpa.registerApplication( //注册微前端服务
      'singleDemo', 
  async () => {
  await runScript('http://127.0.0.1:3000/js/chunk-vendors.js');
  await runScript('http://127.0.0.1:3000/js/app.js'); 
  return window.singleVue;
  },
  location => location.pathname.startsWith('/vue-antd') // 配置微前端模块前缀
  );
  singleSpa.start(); // 启动

Третий шаг, регистрация субкомпонента

Измените main.js родительского проекта.

  import Vue from 'vue'
  import App from './App.vue'
  import singleSpaVue from "single-spa-vue"
  
  const vueOptions = {
  el: "#vue",
  render: h => h(App),
  }
  // new Vue().$mount('#app')
  // singleSpaVue包装一个vue微前端服务对象
  const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: vueOptions
  });
  // 导出生命周期对象
  export const bootstrap = vueLifecycles.bootstrap; // 启动时
  export const mount = vueLifecycles.mount; // 挂载时
  export const unmount = vueLifecycles.unmount; // 卸载时
  export default vueLifecycles;

жизненный цикл одного спа

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


  export default { 
    // app启动 
    Bootstrap: [() => Promise.resolve()],
     // app挂载 
    Mount: [() => Promise.resolve()],
     // app卸载 
    Unmount: [() => Promise.resolve()], 
    // service更新，只有service才可用
     update: [() => Promise.resolve()]
  }

Шаг 5. Автоматически загружать бандл и chunk.vendor

В приведенном выше коде, где родительский проект загружает дочерний проект, мы видим это. Мы хотим зарегистрировать подсервис и нам нужно загрузить сразу 2 файла JS. Если нужно загрузить больше JS, и даже бандл в рабочей среде имеет уникальный хэш, можем ли мы все же написать имя файла и список? Наша идея реализации состоит в том, чтобы позволить подпроектам использовать плагин stats-webpack-plugin и выводить файл manifest.json, содержащий только важную информацию, после каждого пакета. Родительский проект сначала ajax запрашивает файл json, считывает каталог js для загрузки из него, а затем синхронно загружает его.

Добавьте vue.config.js в подпроект и внесите следующие изменения, чтобы сгенерировать файл manifest.json.

  const StatsPlugin = require('stats-webpack-plugin');
  module.exports = {
  ….
    output: {
    library: "singleVue", // 导出名称
    libraryTarget: "window", //挂载目标
    },
    /**** 添加开头 ****/
    plugins: [
    new StatsPlugin('manifest.json', {
    chunkModules: false,
    entrypoints: true,
    source: false,
    chunks: false,
    modules: false,
    assets: false,
    children: false,
    exclude: [/node_modules/]
    })
    ]
    /**** 添加结尾 ****/
  ….
  };

Конечно, единственный runScript в родительском проекте уже нельзя использовать, напишите метод getManifest и разберитесь с ним.


  const getManifest = (url, bundle) => new Promise(async (resolve) => {
    const { data } = await axios.get(url);
    // eslint-disable-next-line no-console
    const { entrypoints, publicPath } = data;
    const assets = entrypoints[bundle].assets;
    for (let i = 0; i < assets.length; i++) {
    await runScript(publicPath + assets[i]).then(() => {
    if (i === assets.length - 1) {
    	resolve()
    }
    })
    }
  });

Сначала мы обращаемся к файлу manifest.json, деконструируем поле publicPath точек входа внутри, проходим по реальному пути js, а затем загружаем его по порядку.


async () => {
  let singleVue = null;
  await getManifest('http://127.0.0.1:3000/manifest.json', 'app').then(() => {
  	singleVue = window.singleVue;
  });
  return singleVue; 
},

Шаг 6. Добавьте еще один новый элемент

Vue-child представляет интерфейс ant Vue-child-two представляет элемент

Также возможно использовать несколько различных технологических стеков (vue, react, angular и т. д.) для синхронной разработки.

Преимущества Единого СПА

  • Agility — независимая разработка и более быстрые циклы развертывания: Команда разработчиков может выбирать собственную технологию и своевременно обновлять стек технологий. Разверните, как только один из них будет выполнен, не дожидаясь завершения всего.
  • Уменьшите риск ошибок и проблем с регрессией, а взаимозависимости резко сократятся.
  • Более простое и быстрое тестирование, каждое небольшое изменение больше не должно касаться всего приложения.
  • Быстрее предоставляйте ценность для клиентов, упрощайте непрерывную интеграцию, непрерывное развертывание и непрерывную поставку.

Справочная статья

документация по одному спа

Односпальный микро-интерфейс

Это, вероятно, самое полное решение для микроинтерфейса, которое вы когда-либо видели!

микроинтерфейс с одним спа

Single-Spa + Vue Cli Micro Frontend Landing Guide (удаленная загрузка изоляции проекта, автоматическое введение)

Полный адрес проекта:GitHub.com/summary должен/петь…

Категории