微前端训练营

微前端介绍：

微前端解决特定问题，他并不是一个通用的解决方案，与技术栈无关，例如有一个庞大的应用集合，汇集了react vue等框架结构，在实际开发中影响到了工作效率，这时候可以考虑一下拆分，再聚合一下，提高开发效率，但如果团队技术栈是统一的，是新的应用，那微前端的应用价值不大，只起到拆分的作用。
参考：
https://micro-frontends.org/
https://martinfowler.com/articles/micro-frontends.html
https://qiankun.umijs.org/zh

几个独立部署的应用汇总到页面内部.png

多种技术栈混合.png

为什么不使用iframe

iframe可以认为是最早的一个微前端解决方案，可以聚合多个页面，但是最大的问题是体验不好，每次数据的更新都需要页面跳转，并且上下文文件隔离，加载慢，微前端你可以理解为iframe的spa版，我们做的就是单页面路由监听=》不同的(spa是组件)app，下面我们来了解一下微前端到底要包含什么样的解决方案
1.解决页面跳转也就是路由切换，使用html-loader，通过一个无论是vue还是react,最后编译出来的都是可以阅读的html
2.解决两个应用之间有可能是css冲突的 css污染
3.js需要在一个比较隔离的环境下执行 js沙箱
4.路由切换
现在业界最成熟的微前端解决方案，就是阿里巴巴出品的qiankun框架，也是现在最完善的一个微服务的解决方案 https://qiankun.umijs.org/zh

$ yarn add qiankun # 或者 npm i qiankun -S

import { loadMicroApp } from 'qiankun';

// 加载微应用
import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'react app', // app name registered
    entry: '//localhost:7100', //入口
    container: '#yourContainer', //容器
    activeRule: '/yourActiveRule', //activeRule匹配到路由是做应用级别的切换
  },
  {
    name: 'vue app',
    entry: { scripts: ['//localhost:7100/main.js'] },
    container: '#yourContainer2',
    activeRule: '/yourActiveRule2',
  },
]);

start(); //启动应用
微前端原理

首先通过html-loader解析出来需要加载的css js 容器html；解决css污染方面，一,可以使用不同的css前缀;二可以动态加载css;三shadow dom 内置的动态样式表 又比如scroped css；js沙箱，我们可以使用闭包内部加载使用js，完成封装 Eval(function(){ ...code} ) 但是js沙箱看起来很简单 但是会有一个问题eval的内部可能会修改window.xx的全局变量，据此我们可以使用proxy window的方式使用getter setter的方式保护全局变量; 路由切换，拦截一下addEventListener事件，拦截hashchange的popstate(history)记录。
我们先尝试着搭建一个简单的前端应用

 npm install express npm-run-all -D

构建一个简单的项目，新建一个server.js 作为微前端基座应用的小小的一个入口

//server.js
const express = require('express');
const app = express()
app.use(express.static('.'))
app.listen(9000, ()=>{
    console.log('base app at port 9000')
})

新建一个入口html文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1>caixukun</h1> 
    <div id="caixukun"></div>
    <script type="module">
        import {importHtml} from './src/loader.js'
        importHtml('http://localhost:9001')
    </script>
</body> 
</html>

新建src文件夹-index.js/loader.js

export function inportHtml(entry){
    //解析html 生成js css
}

创建一个小应用
新建app1文件夹-app1.js/index.html/app1.css/server1.js

//server1.js
const express = require('express');
const app = express()
app.use(express.static('./app1'))
app.listen(9001, ()=>{
    console.log('app1 at port 9001')
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        h1{ color: red; }
    </style>
</head>
<body>
    <h1>i am app1 </h1>
    <button id="app1">100</button>
    <script src="/app1.js"></script>
    <script>
        console.log('app1 嘿嘿')
    </script>
</body>
</html>

let count = 100;
document.querySelector('#app1').addEventListener('click',function(){
    this.textContent = count++
},false)

配置package.json,启动这两个服务

"scripts": {
        "dev": "npm-run-all --parallel dev:*",
        "dev:base":"node server.js",
        "dev:app1":"node app1/server1.js"
    },

运行npm run dev 就可以启动9001 和 9000端口两个服务，9000是一个完整的应用，下一步，我们就应该把引入子应用并且尝试把内容解析出来。
修改src/loader.js

export function importHtml(entry){
    //解析html 生成js css
    // 1.加载子应用入口 
    let content = await loadSource(entry)
    console.log(content)
}
function loadSource(url){
    return window.fetch(url).then(res=>res.text())
}

同时需要为server1.js 添加header头，解决跨域问题

const express = require('express');
const app = express()
//解决跨域
app.get('*',function(req,res,next){
    res.header('Access-Control-Allow-Origin','*')
    res.header('Access-Control-Allow-Methods','PUT,GET,POST,DELETE,OPTIONS');
    res.header('Access-Control-Allow-Headers','X-Requested-With');
    res.header('Access-Control-Allow-Headers','Content-Type');
    next()
})
///...

@todo 解析script
@todo 解析css
@todo 解析body

对请求回来的body体内容进行解析,首先使用正则匹配js，我们常用的引入的js的方式分为script标签引入和远程cdn引入；

//loader.js
let content = await loadSource(entry)
const ret = parseScript(content)
console.log(ret)
    // @todo 解析script
    // @todo 解析css
    // @todo 解析body
   const ATTR_RE = /["'=\w\s]*/.source //提取script标签的attr
   function parseScript(content){
        const ATTR_RE = /["'=\w\s]*/.source //提取script标签的attr
        const SCRIPT_CONTENT_RE = new RegExp('<script' + ATTR_RE + '>([\\w\\W]*)</script>','g')
        const SCRIPT_SRC_RE = new RegExp('<script' + ATTR_RE + 'src="(.+)">','g')
        console.log(SCRIPT_SRC_RE)
        const scripts = []
        const scriptsUrls = []
        let match
        while((match = SCRIPT_CONTENT_RE.exec(content))){
            const script = match[1].trim()
            script && scripts.push(script)
        }
        while((match = SCRIPT_SRC_RE.exec(content))){
            const url = match[1].trim()
            url && scriptsUrls.push(url)
        }
        return{
            scripts,scriptsUrls
        }
    }

我们解析完js之后，下一步我们要尝试把他loader出来，两种方式一种是远程js，用的时候在加载，也可以parse之后load进来，存文本。

let remoteScripts = await Promise.all(scriptsUrls.map(url=>{
   //app.js = > http://localhost:9001/app.js
let u = url.startsWith('http:') || url.startsWith('https:') ? url : entry + url
    return loadSource(u)
}))
scripts = remoteScripts.concat(scripts)
return  { scripts }
loaderjs.png

到这里我们就已经解析完了js，下面我们来解析css，通常情况下css引入的方式有两种，link的方式和style的方式引入

const {css,style} = parseCss(content,entry)
    function parseCss(content,entry){
        //<link xx href="xx.css">
        //<style>css</style>
        const CSS_LINK_RE = new RegExp('<link'+ ATTR_RE +'href="([^"]+.css[^"]*)"'+ ATTR_RE +'>','g')
        const STYLE_CONTENT_RE = /<style>([^<]*])<\/style>/g
        
        const CSS_RE = new RegExp('(?:'+ CSS_LINK_RE.source +')|(?:'+ STYLE_CONTENT_RE.source +")",'g')
        let match
        let css = [] //远程的css地址
        let styles = [] //本地的css
        while((match = CSS_RE.exec(content))){
            let style
            if(math(1)){
                style = match[1].trim()
                style && css.push(style)
            }else if(match[2]){
                style = match[2].trim()
                style && styles.push(style)
            }
        }
        return { css , styles}
    }

除了这些样式之外 body内部的文本是需要我们放在当前页面内部的，同之前一样，我们在写一个parseBody的方法；

function parseBody(content){
        const BODY_RE = /<body>([\w\W]*)<\/body>/g //不考虑body的attr
        const SCRIOT_RE = /<script["'=\w\s]*>[\s\S]*<\/script>/g
        let bodyContent = content.match(BODY_RE)
        console.log(bodyContent)
        //下一步 我们还需要把body内部的script去掉
    }

完成

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 158,736评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,167评论 1赞 291
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,442评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 43,902评论 0赞 204
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,302评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,573评论 1赞 216
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,847评论 2赞 312
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,562评论 0赞 197
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,260评论 1赞 241
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2赞 245
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1赞 258
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,367评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,016评论 3赞 235
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0赞 194
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2赞 269

推荐阅读更多精彩内容

  • 微前端
    2020.12.30微前端解决特定问题：技术栈无关https://micro-frontends.org/[htt...
    monkeyfly36阅读 399评论 0赞 0
  • 微前端
    背景 近几年前端技术发展迅猛，框架组件层出不穷，导致企业中慢慢沉淀了很多不同技术栈的前端应用。同时随着前端业务复杂...
    cd2001cjm阅读 837评论 1赞 2
  • qiankun + Vue实现微前端服务
    本文介绍如何使用qiankun + Vue搭建一个前端微服务 一、什么是微前端 Techniques, strat...
    超人s阅读 5,053评论 3赞 8
  • Vue + qiankun 快速实现前端微服务
    本文介绍 Vue 项目如何实现前端微服务 一、前言 什么是微前端 Techniques, strategies a...
    August_____阅读 23,944评论 8赞 14
  • 你说
    夜莺2517阅读 127,664评论 1赞 9