Skip to content

Host

Jump to bottom
Adolph-WSY edited this page Sep 6, 2021 · 2 revisions

[TOC]

Host端消费Remote模块

整体逻辑

federation

transform

VirtualFile

在内存中加载一个虚拟文件，可以用于调用

虚拟文件名称： __federation__

虚拟文件内容：

const remotesMap = {
  'remote-simple': () => import('http://localhost:5011/remoteEntry.js')
}

const shareScope = {
  vue: { get: () => import('__rf_shareScope__${vue}') }
}

const initMap = {}

export default {
  ensure: async (remoteId) => {
    const remote = await remotesMap[remoteId]()

    if (!initMap[remoteId]) {
      remote.init(shareScope)
      initMap[remoteId] = true
    }

    return remote
  }
}

Before Transform

import Section from './components/Section.vue'

const script = {
  name: 'App',
  components: {
    Section,
    Button: () => import('./components/Button.vue'),
    RemoteButton: () => import('remote-simple/remote-simple-button'),
    RemoteSection: () => import('remote-simple/remote-simple-section'),
  }
}

import { render, staticRenderFns } from 'D:/developement/workspace/frontend-extranet/originjs/vite-plugin-federation/packages/examples/vue2-demo/host-simple/src/App.vue?vue&type=template&lang.js'
const __cssModules = {}

import "D:/developement/workspace/frontend-extranet/originjs/vite-plugin-federation/packages/examples/vue2-demo/host-simple/src/App.vue?vue&type=style&index=0&lang.css"
/* normalize component */
import normalizer from "

AfterTransform

import __federation__ from '__federation__';
import Section from './components/Section.vue'

const script = {
  name: 'App',
  components: {
    Section,
    Button: () => import('./components/Button.vue'),
    RemoteButton: () => __federation__.ensure("remote-simple").then((remote) => remote.get("./remote-simple-button")),
    RemoteSection: () => __federation__.ensure("remote-simple").then((remote) => remote.get("./remote-simple-section")),
  }
}

import { render, staticRenderFns } from 'D:/developement/workspace/frontend-extranet/originjs/vite-plugin-federation/packages/examples/vue2-demo/host-simple/src/App.vue?vue&type=template&lang.js'
const __cssModules = {}

import "D:/developement/workspace/frontend-extranet/originjs/vite-plugin-federation/packages/examples/vue2-demo/host-simple/src/App.vue?vue&type=style&index=0&lang.css"
/* normalize component */
import normalizer from "

RemoteEntry.js

let moduleMap = {
  "./remote-simple-button": () => {
    dynamicLoadingCss("assets/RemoteSimpleButton.ddd461f5.css");
    return import("./assets/RemoteSimpleButton.030cb284.js");
  },
  "./remote-simple-section": () => {
    dynamicLoadingCss("assets/RemoteSimpleSection.31d88c22.css");
    return import("./assets/RemoteSimpleSection.7587f64b.js");
  }
};
const dynamicLoadingCss = (cssFilePath) => {
  强制要求入口文件
  <script type="module" src="./src/main.js"></script>
    
  const metaUrl = import.meta.url;
  if (typeof metaUrl == "undefined") {
    console.warn('The remote style takes effect only when the build.target option in the vite.config.ts file is higher than that of "es2020".');
    return;
  }
  const curUrl = metaUrl.substring(0, metaUrl.lastIndexOf("remoteEntry.js"));
  const element = document.head.appendChild(document.createElement("link"));
  element.href = curUrl + cssFilePath;
  element.rel = "stylesheet";
};
const get = (module, getScope) => {
  return moduleMap[module]();
};
const init = (shareScope, initScope) => {
  let global = window || node;
  global.__rf_var__shared = shareScope;
};
export { dynamicLoadingCss, get, init };

通用钩子

在开发中，Vite 开发服务器会创建一个插件容器来调用 Rollup 构建钩子，与 Rollup 如出一辙。

以下钩子在服务器启动时被调用：

以下钩子会在每个传入模块请求时被调用：

以下钩子在服务器关闭时被调用：

请注意 moduleParsed 钩子在开发中是 不会 被调用的，因为 Vite 为了性能会避免完整的 AST 解析。

Output Generation Hooks（除了 closeBundle) 在开发中是 不会 被调用的。你可以认为 Vite 的开发服务器只调用了 rollup.rollup() 而没有调用 bundle.generate()。

Clone this wiki locally