webpack5 (Module Federation) + vue3.0 для достижения микроинтерфейса

Vue.js
webpack5 (Module Federation) + vue3.0 для достижения микроинтерфейса

Адрес исходного кода проекта:

https://github.com/wuxiaohuaer/webpack5-vue-admin

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

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

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

2. Зачем использовать микроинтерфейс?

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

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

1. Процедура обременительна

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

更新npm包版本

更新A管理系统应用的npm包版本

发布部署A管理系统应用

对B和C管理系统应用循环2和3步骤

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

Если в проекте есть ссылки на n компонентов, помимо обновления из npm, при сборке и развертывании вам также необходимо их все упаковать, и опыт разработки будет становиться все хуже и хуже.

Микросервисам не нужно локально собирать код этих подмодулей, тем самым уменьшая объем сборки и повышая эффективность разработки.

3. Схема реализации микроинтерфейса

ГОРЯЧИЕ ГОРЯЧИХ МИКРОВЫХ РЕШЕННЫХ РЕШЕНИЯ РЕШЕНИЯ РЕШЕНИЯМИ РЕШЕНИЯМИ ОТКРЫТИЯ ДОЛЖНО ОБЕСПЕЧИТЬ ЦИАНКУН:qiankun.umijs.org/zh/guide

Если вы заинтересованы, вы можете перейти на официальный сайт, чтобы узнать

Я сам не разрабатывал очень крупномасштабную систему, поэтому микросервисы меня мало интересуют. Некоторое время назад я только изучал webpack5 и обнаружил, что в webpack5 есть функция федеративного модуля (mf), которая является лучшим решением для общедоступной загрузки зависимостей микро-интерфейсов.

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

В настоящее время основанная на mf относительно зрелая микроинтерфейсная архитектура представляет собой микроинтерфейсное решение EMP от команды YY.

GitHub.com/E fox team/devil…

Как специалист по vue, я реализую базовый микросервис на основе последней версии vue3.0+webpack5.

В-четвертых, создайте среду

1. Создайте папку

// 创建文件夹

mkdir hand-vue3-project && cd hand-vue3-project

// 初始化项目
npm init -y

2. Зависимости установки

yarn add webpack webpack-cli -D

3, создайте файл

Создайте папку SRC, index.html и webpack.config.js в корневом каталоге и создайте main.js в папке SRC

// webpack.config.js
const path = require('path')

module.exports = {
  mode: 'development', // 环境模式
  entry: path.resolve(__dirname, './src/main.js'), // 打包入口
  output: {
    path: path.resolve(__dirname, 'dist'), // 打包出口
    filename: 'js/[name].js' // 打包完的静态资源文件名
  }
}


"dev": "webpack --config ./webpack.config.js"

Распечатайте его в main.js

console.log('hello,world!')

Запустите команду:

yarn dev

В это время вы можете видеть, что в папке dist есть упакованный файл js.

Пять, введение vue3.0

Проект компании не решается использовать vue3.x, а может только покрасоваться на демке

Установить зависимости

yarn add vue@next -S
@next -S才能下载到最新的vue版本

yarn add html-webpack-plugin -D
将 index.html 作为模板，打出到 dist 文件夹

yarn add vue-loader@next 
解析和转换 .vue  文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template


yarn add @vue/compiler-sfc
Vue 2.x 时代，需要 vue-template-compiler 插件处理 .vue 内容为 ast ， Vue 3.x 则变成 @vue/compiler-sfc 。

yarn add vue-style-loader css-loader

элемент конфигурации

1. веб-пакет.config.js

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 最新的 vue-loader 中，VueLoaderPlugin 插件的位置有所改变
const { VueLoaderPlugin } = require('vue-loader/dist/index')

module.exports = {
  mode: 'development',
  entry: path.resolve(__dirname, './src/main.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'js/[name].js'
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        use: [
          'vue-loader'
        ]
      },
      {
        test: /\.css$/,
          use: [
            'style-loader',
            'css-loader'
          ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, './index.html'),
      filename: 'index.html',
      title: '微前端框架1'
    }),
    // 添加 VueLoaderPlugin 插件
    new VueLoaderPlugin()
  ]
}

2. Файлы в src

main.js

import { createApp } from 'vue' // Vue 3.x 引入 vue 的形式
import App from './app.vue' // 引入 APP 页面组建

const app = createApp(App) // 通过 createApp 初始化 app
app.mount('#root') // 将页面挂载到 root 节点

Новый app.vue

<template>
  <div>距离2021年欧洲杯还有？</div>
</template>

<script>
export default {
  
}
</script>

В это время, когда запускается yarn dev, index.html будет упакован в папку dist.Вы можете увидеть эффект, когда откроете его, но слишком хлопотно упаковывать и открывать его каждый раз.

Представляем WDS

yarn add webpack-dev-server -D

webpack.config.js

devServer: {
  contentBase: path.resolve(__dirname, './dist'),
  port: 8080,
  publicPath: '/'
}

package.json

"dev": "webpack serve --progress --config ./webpack.config.js"

Пробежать пряжу dev.

6. Внедрение микросервисов с использованием федеративных модулей

Мы только что назвали его для проекта А. Теперь нам нужно создать общий компонент проекта А и экспортировать его.

1. Создайте новый компонент

mountDown.vue

<template>
    <div>{{ sum }}天</div>
</template>
<script>
import { defineComponent, onMounted, ref, computed } from 'vue'
export default {
    setup() {
        let sum = computed(() => parseInt((new Date('2021-06-13'.replace(/-/g, '/')).getTime() - new Date()) / (1000*3600*24)));
        return {
            sum
        }
    }
}
</script>

2. Экспорт компонентов

webpack.config.js

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

new ModuleFederationPlugin({
  name: "A", // 暴露出去的模块名
  filename: "remoteEntry.js", // 构建出来的文件名
  exposes: {
    './countDown': './src/components/countDown.vue' // 暴露出去。key，要写相对路径
  }
})

3. Внедрение проекта B

webpack.config.js

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

new ModuleFederationPlugin({
  name: "B", // 暴露出去的模块名
  filename: "remoteEntry.js", // 构建出来的文件名
  remotes: {
    A: 'A@http://localhost:8080/remoteEntry.js' // 引用
  }
})

app.vue

<template>
  <div>距离2021年欧洲杯还有？</div>
  <countDown/>
</template>

import { defineAsyncComponent } from 'vue'

const countDown = defineAsyncComponent(() =>
        import('A/countDown')
)

export default {
  components: { countDown },
  setup() {
    return {
    }
  }
}

Если вы измените код в проекте A, проект B также будет обновлен вовремя.Если в разных приложениях есть одни и те же компоненты, нет необходимости копировать и вставлять один и тот же код в код каждого приложения, что решает проблема совместного использования кода между приложениями.

Семь основных концепций и конфигурация

• 使用Module Federation 时， 每个应用块都是一个独立的构建，这些构建都将被编译为 容器。
• 被应用的容器，被称为 remote
• 引用者，被称为 host
• 暴露出去被使用的模块，称为remote模块

принцип

Принцип чувств заключается в использовании JSONP. Создайте глобальную переменную в соответствии с модулем и получите исходный код для различных компонентов на основе глобальных переменных.

Ссылка на ссылку

https://juejin.cn/post/6921161482663100423#heading-2

https://www.yuque.com/violet-coyxa/ib3u7d/etzwyg
Категории