Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the method of importing the loader application into the micro-front-end framework". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "what is the method of micro-front-end framework to import add sub-application"!

The following code, the entry I specified, is the access entry address of the sub-application.

What's going on with the micro front end? I drew a picture.

Today, we will not talk about other technical details of the implementation, let's just talk about the overall architecture, and this diagram can fully explain it.

So what exactly did registerMicroApps do?

To parse the source code, let's just look at the important parts today:

LifeCycles is our own life cycle function (not explained here). Like react, the micro front end encapsulates some life cycle for each sub-application. If you are a rookie, then I will tell you in the simplest terms, life cycle hook, in fact, in the framework source code is just a function to write the call order (some sub-asynchronous and synchronous)

Apps is the array we passed in, and the collection of sub-applications

Some anti-duplicate registration, data processing and so on have been done in the code.

Look at the source code, don't read it all, it takes a lot of time, and you can't maximize the benefits, just look at the quintessence and important parts.

Regardless of the face-saving application de-duplication and data processing above, I just need to keep an eye on each sub-application, that is, the object app.

Seeing the loadApp method, we can roughly guess that it is loaded by this method.

The following _ _ rest is to process the data

LoadApp this function has about 300 lines, pick the most important place to look.

RegisterApplication is the method of single-spa. Here, we use the method of loadApp to process the data.

The above function, which should be the most complex part of the entire micro-front-end framework, will eventually return a function that will be passed to the registerApplication method of the library single-spa.

Inside it is switch case logic, which returns an array

This is a logical judgment.

Case 0: entry = app.entry, appappName = app.name; _ b = configuration.singular, singular = _ b = = void 0? False: _ b, _ c = configuration.sandbox, sandbox = _ c = void 0? True: _ c, importEntryOpts = _ _ rest (configuration, ["singular", "sandbox"]); return [4 / * yield*/, importEntry (entry, importEntryOpts)]

Here comes the point.

Entry will be loaded via importEntry (sub-application address)

The most important thing in the above code is that if we entry the string, we will use this function to load the HTML content (in fact, all the sub-applications of the micro-front end load and render the dom node into a div tag in the index.html file of the base)

The function importHTML is our most important point tonight.

Pass in the url address and initiate the fetch request (cross-domain will occur because the domain name or port is different. Under the hot update development mode of all sub-applications, the webpack configuration needs to do the following, and deployment should also consider this problem)

The whole importHTML function seems to be very long, but let's look at the most important place, a framework (library), the process line is very long + version iteration reasons, need to be compatible with the old version, so a lot of source code is actually useless to us.

The whole function finally returns an object, which is obviously converted to a string after the resource file of the corresponding sub-application entry entry is obtained through the fetch request.

Here processTpl is actually a data assembly for the dom template (string format) of this sub-application. In fact, it is not very complicated. Because of the time constraint, you can take a look at the process and focus on the results.

The idea here is the middleware source code of redux, which wraps the data in a layer and is highly available for use.

Function processTpl (tpl, baseURI) {var scripts = []; var styles = []; var entry = null; var template = tpl / * remove html comment first * / .replace (HTML_COMMENT_REGEX,'') .replace (LINK_TAG_REGEX, function (match) {/ * change the css link * / var styleType =! match.match (STYLE_TYPE_REGEX); if (styleType) {var styleHref = match.match (STYLE_HREF_REGEX) Var styleIgnore = match.match (LINK_IGNORE_REGEX); if (styleHref) {var href = styleHref & & styleHref [2]; var newHref = href; if (href & &! hasProtocol (href)) {newHref = getEntirePath (href, baseURI);} if (styleIgnore) {return genIgnoreAssetReplaceSymbol (newHref);} styles.push (newHref); return genLinkReplaceSymbol (newHref) } var preloadOrPrefetchType = match.match (LINK_PRELOAD_OR_PREFETCH_REGEX) & & match.match (LINK_HREF_REGEX); if (preloadOrPrefetchType) {var _ match$matchmatch = match.match (LINK_HREF_REGEX), _ match$match3 = (0, _ slicedToArray2 ["default"]) (_ match$match, 3), linkHref = _ match$match3 [2]; return genLinkReplaceSymbol (linkHref, true);} return match ) .replace (STYLE_TAG_REGEX, function (match) {if (STYLE_IGNORE_REGEX.test (match)) {return genIgnoreAssetReplaceSymbol ('style file');} return match;}) .replace (ALL_SCRIPT_REGEX, function (match) {var scriptIgnore = match.match (SCRIPT_IGNORE_REGEX)) / / in order to keep the exec order of all javascripts / / if it is an external script if (SCRIPT_TAG_REGEX.test (match) & & match.match (SCRIPT_SRC_REGEX)) {/ * collect scripts and replace the ref * / var matchmatchedScriptEntry = match.match (SCRIPT_ENTRY_REGEX); var matchmatchedScriptSrcMatch = match.match (SCRIPT_SRC_REGEX); var matchedScriptSrc = matchedScriptSrcMatch & & matchedScriptSrcMatch [2] If (entry & & matchedScriptEntry) {throw new SyntaxError ('You should not set multiply entry scriptching');} else {/ / append the domain while the script not have an protocol prefix if (matchedScriptSrc & &! hasProtocol (matchedScriptSrc)) {matchedScriptSrc = getEntirePath (matchedScriptSrc, baseURI);} entryentry = entry | | matchedScriptEntry & & matchedScriptSrc;} if (scriptIgnore) {return genIgnoreAssetReplaceSymbol (matchedScriptSrc | |'js file') } if (matchedScriptSrc) {var asyncScript =!! match.match (SCRIPT_ASYNC_REGEX); scripts.push (asyncScript? {async: true, src: matchedScriptSrc}: matchedScriptSrc); return genScriptReplaceSymbol (matchedScriptSrc, asyncScript);} return match;} else {if (scriptIgnore) {return genIgnoreAssetReplaceSymbol ('js file') } / / if it is an inline script var code = (0, _ utils.getInlineCode) (match); / / remove script blocks when all of these lines are comments. Var isPureCommentBlock = code.split (/ [\ r\ n] + /) .every (function (line) {return! line.trim () | | line.trim () .startsWith ('/ /');}); if (! isPureCommentBlock) {scripts.push (match);} return inlineScriptReplaceSymbol;}}); scriptsscripts = scripts.filter (function (script) {/ / filter empty script return! script;}) Return {template: template, scripts: scripts, styles: styles, / / set the last script as entry if have not set entry: entry | | scripts [scripts.length-1]};}

Finally, an object is returned, which is no longer a pure html string, but an object, and the script style is separated.

This is handled by the framework for us. We must set up an entry js file.

/ / set the last script as entry if have not set

The following is the real single-spa source code, register sub-applications, use the apps array to collect all sub-applications (each item in the array already has script, html, css-style content)

At this point, all we have to do is to control the display sub-application according to the activeRule and listening for front-end routing changes, the principle is as follows: (I won't explain this too much today)

Window.addEventListener ('hashchange', reroute); window.addEventListener (' popstate', reroute); / / intercept all registered events to ensure that the events here are always the first to execute const originalAddEventListener = window.addEventListener; const originalRemoveEventListener = window.removeEventListener Window.addEventListener = function (eventName, handler, args) {if (eventName & & HIJACK_EVENTS_NAME.test (eventName) & & typeof handler = 'function') {EVENTS_ POOL [eventName] .indexOf (handler) = =-1 & & EVENTS_ POOL [eventName] .push (handler);} return originalAddEventListener.apply (this, arguments);} Window.removeEventListener = function (eventName, handler) {if (eventName & & HIJACK_EVENTS_NAME.test (eventName) & & typeof handler = = 'function') {let eventList = EVENTS_ POOL [eventName]; eventList.indexOf (handler) >-1 & & (EVENTS_ POOL [eventname] = eventList.filter (fn = > fn! = handler));} return originalRemoveEventListener.apply (this, arguments);}

It is also the middleware idea of redux, hijacking the event, then dispatching it, preferentially calling the routing event of the micro-front-end framework, and then filtering and displaying the sub-application:

Export function getAppsToLoad () {return APPS.filter (notSkipped) .filter (withoutLoadError) .filter (isntLoaded) .filter (shouldBeActive);}

The trigger process of the whole micro-front end

At this point, I believe that everyone has a deeper understanding of "what is the method of importing and loading sub-applications into the micro-front-end framework". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.