Vue-cli, ts + single-spa + systemJs для создания микроинтерфейса

внешний фреймворк

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

  1. Перенаправление нескольких приложений с помощью маршрутизации HTTP-сервера
  2. Разрабатывайте механизмы связи и загрузки поверх различных фреймворков, таких какMooaа такжеSingle-SPA
  3. Создайте единое приложение, объединив несколько независимых приложений и компонентов.
  4. фреймы. Использование iFrames и настраиваемых сообщений
  5. использовать чистыйWeb ComponentsСоздайте приложение
  6. комбинироватьWeb ComponentsПостроить

В этой практикеSingle-SPAМеханизм заряжания следующий.

Архитектура проекта

Общая структура

Внутренний элемент эффект
portal Структура распределения маршрутов верхнего уровня
menu Панель навигации
cooper основной проект
projects Есть кастомные западные предметы
.gitignore git commit игнорирует конфигурацию
readme.md Документация

Коммуникационный механизм поверх фреймворка

портал: источник механизма распределения маршрутов, использование systemJs и single-spa.

Когда проект портала запускается как служба, параметр порта становится 8233.

systemJs: это универсальный загрузчик модулей, который поддерживает загрузку модулей JS в различных форматах, таких как AMD, CommonJS, ES6 и т. д. Это также официальный загрузчик Angular2. Таким образом, этот экземпляр микроинтерфейса поддерживает кросс-технологическую (реагирующую, угловую) загрузку модулей.

single-spa: это фреймворк для интеграции приложений, созданных с использованием нескольких языковых фреймворков javascript.

<script type="systemjs-importmap">{...}</script>

Используется для импорта сторонних модулей и плагинов, которые, возможно, потребуется импортировать. Здесь файлы config.js, single-spa.min.js и styles.css импортированы в формате HTTP, чтобы избежать проблем с последующей маршрутизацией, поскольку HTML-код будет повторно использоваться как шаблон.

Использование метода, представленного systemjs

System.import('@portal/config')

Внедрить модуль single-spa

registerApplication(名称，引入路径，是否引入)
singleSpa.start()启用

Используется для определения того, импортирован ли модуль

меню: переход на страницу

Поскольку весь проект написан на vue, для перехода по маршруту используется vue-router.

Пример:

<router-link to="/index" />

Купер: страница ответа *** Подпроект написан с использованием vue-cli, поэтомуОбязательно представьте vue-cli-plugin-single-spaplugin, в противном случае хук single-spa подпроекта не может быть правильно экспортирован.

В проекте vue сначала создайте router.ts Пример:

import index from 'views/index/index.vue'

export default [{
    path: '/index',
    name: 'index',
    component: index
}, ...]

в app.vue

<router-view />

Так почему же маршрутизация между разными проектами соответствует?

Все самостоятельные проекты упаковываются и выводятся в виде single-spa и импортируются в архитектуру портала.После внедрения systemjs он эквивалентен проекту, работающему под порталом, а http подключается к localhost:8233. Поэтому при обращении к картинкам и css файлам в самостоятельных проектах их тоже нужно импортировать в виде http. Избегайте проблемы, связанной с тем, что Король дорог не может найти его после слияния с порталом.

Конфигурация файла одной записи приложения

cooper/projects/menu: конфигурация входного файла

Поскольку его нужно упаковать в виде single-spa, файл записи будет другим.

Входной файл main.ts

import Vue from 'vue'
import singleSpaVue from 'single-spa-vue'
import App from './App.vue'
import store from './store'
import router from './router'

const vueLifecircle = singleSpaVue({
    Vue,
    appOption: {
        el: '#vue',
        render: r => r(App),
        store,
        router
    }
})

App.vue

<template>
    <div id="vue">
        <keep-alive>
            <router-view />
        </keep-alive>
    </div>
</template>
...

детали конфигурации веб-пакета

Конфигурация вывода формы проекта single-spa

Возьмите меню в качестве примера для упаковки и настройки vue.config.js для независимого проекта.

const path = require('path')
module.exports = {
    chainWebpack: config => {
        config.entryPoints.clear()
        config.entry('menu').add('./src/main.ts').end()
        config.output.filename('menu.js').library('menu').libraryTarget('amd').end()
        config.devServer.port(8001).headers({
            "Access-Control-Allow-Origin": "*"
        })
    },
    outputDir: path.resolve(__dirname, 'dist/')
}

Выходной файл записи — menu.js, упакованный в формате AMD Причина: single-spa находится в формате AMD, поэтому это также причина, по которой amd.js упоминается в проекте портала.

Конфигурация упаковки проекта портала

webppapck.config.config.js

module.export = {
    entry: './src/config',
    output: {
        filename: 'config.js',
        library: 'config',
        libraryTarget: 'amd',
        path: path.resolve(__dirname, 'build')
    },
    ...
    plugins: [
        CopyWebpackPlugin([
            {form: path.resolve(__dirname, 'src/index.html')},
            {from: path.resolve(__dirname, 'src/style.css')},
            {from: path.resolve(__dirname, 'common-deps-static')}
        ])
    ]
}

Запустите проект после упаковки

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

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

Все общедоступные зависимости всех подпроектов можно извлечь, поместить на уровень портала и импортировать в виде статических файлов. Точно так же Vue, VueRouter и Vuex также могут сначала быть System.import() на уровне портала и зарегистрированы как доступные. Для получения более подробной информации документ будет организован в качестве пояснения позже.

Категории