微前端介紹：
微前端解決特定問(wèn)題，他并不是一個(gè)通用的解決方案员凝，與技術(shù)棧無(wú)關(guān)署驻，例如有一個(gè)龐大的應(yīng)用集合，匯集了react vue等框架結(jié)構(gòu)健霹，在實(shí)際開(kāi)發(fā)中影響到了工作效率旺上，這時(shí)候可以考慮一下拆分，再聚合一下糖埋，提高開(kāi)發(fā)效率宣吱，但如果團(tuán)隊(duì)技術(shù)棧是統(tǒng)一的，是新的應(yīng)用瞳别，那微前端的應(yīng)用價(jià)值不大征候，只起到拆分的作用。
參考：
https://micro-frontends.org/
https://martinfowler.com/articles/micro-frontends.html
https://qiankun.umijs.org/zh
為什么不使用iframe
iframe可以認(rèn)為是最早的一個(gè)微前端解決方案倍奢，可以聚合多個(gè)頁(yè)面，但是最大的問(wèn)題是體驗(yàn)不好垒棋，每次數(shù)據(jù)的更新都需要頁(yè)面跳轉(zhuǎn)卒煞，并且上下文文件隔離，加載慢叼架，微前端你可以理解為iframe的spa版畔裕，我們做的就是單頁(yè)面路由監(jiān)聽(tīng)=》不同的(spa是組件)app，下面我們來(lái)了解一下微前端到底要包含什么樣的解決方案
1.解決頁(yè)面跳轉(zhuǎn)也就是路由切換乖订，使用html-loader扮饶，通過(guò)一個(gè)無(wú)論是vue還是react,最后編譯出來(lái)的都是可以閱讀的html
2.解決兩個(gè)應(yīng)用之間有可能是css沖突的 css污染
3.js需要在一個(gè)比較隔離的環(huán)境下執(zhí)行 js沙箱
4.路由切換
現(xiàn)在業(yè)界最成熟的微前端解決方案，就是阿里巴巴出品的qiankun框架乍构，也是現(xiàn)在最完善的一個(gè)微服務(wù)的解決方案 https://qiankun.umijs.org/zh
$ yarn add qiankun # 或者 npm i qiankun -S
import { loadMicroApp } from 'qiankun';
// 加載微應(yīng)用
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: 'react app', // app name registered
entry: '//localhost:7100', //入口
container: '#yourContainer', //容器
activeRule: '/yourActiveRule', //activeRule匹配到路由是做應(yīng)用級(jí)別的切換
},
{
name: 'vue app',
entry: { scripts: ['//localhost:7100/main.js'] },
container: '#yourContainer2',
activeRule: '/yourActiveRule2',
},
]);
start(); //啟動(dòng)應(yīng)用
微前端原理
首先通過(guò)html-loader解析出來(lái)需要加載的css js 容器html甜无；解決css污染方面，一,可以使用不同的css前綴;二可以動(dòng)態(tài)加載css;三shadow dom 內(nèi)置的動(dòng)態(tài)樣式表 又比如scroped css哥遮；js沙箱岂丘，我們可以使用閉包內(nèi)部加載使用js，完成封裝 Eval(function(){ ...code} ) 但是js沙箱看起來(lái)很簡(jiǎn)單 但是會(huì)有一個(gè)問(wèn)題eval的內(nèi)部可能會(huì)修改window.xx的全局變量眠饮，據(jù)此我們可以使用proxy window的方式使用getter setter的方式保護(hù)全局變量; 路由切換奥帘，攔截一下addEventListener事件，攔截hashchange的popstate(history)記錄仪召。
我們先嘗試著搭建一個(gè)簡(jiǎn)單的前端應(yīng)用
npm install express npm-run-all -D
構(gòu)建一個(gè)簡(jiǎn)單的項(xiàng)目寨蹋，新建一個(gè)server.js 作為微前端基座應(yīng)用的小小的一個(gè)入口
//server.js
const express = require('express');
const app = express()
app.use(express.static('.'))
app.listen(9000, ()=>{
console.log('base app at port 9000')
})
新建一個(gè)入口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
}
創(chuàng)建一個(gè)小應(yīng)用
新建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,啟動(dòng)這兩個(gè)服務(wù)
"scripts": {
"dev": "npm-run-all --parallel dev:*",
"dev:base":"node server.js",
"dev:app1":"node app1/server1.js"
},
運(yùn)行npm run dev 就可以啟動(dòng)9001 和 9000端口兩個(gè)服務(wù)松蒜，9000是一個(gè)完整的應(yīng)用，下一步已旧，我們就應(yīng)該把引入子應(yīng)用并且嘗試把內(nèi)容解析出來(lái)秸苗。
修改src/loader.js
export function importHtml(entry){
//解析html 生成js css
// 1.加載子應(yīng)用入口
let content = await loadSource(entry)
console.log(content)
}
function loadSource(url){
return window.fetch(url).then(res=>res.text())
}
同時(shí)需要為server1.js 添加header頭，解決跨域問(wèn)題
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
對(duì)請(qǐng)求回來(lái)的body體內(nèi)容進(jìn)行解析,首先使用正則匹配js评姨，我們常用的引入的js的方式分為script標(biāo)簽引入和遠(yuǎn)程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標(biāo)簽的attr
function parseScript(content){
const ATTR_RE = /["'=\w\s]*/.source //提取script標(biāo)簽的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出來(lái)吐句，兩種方式一種是遠(yuǎn)程js胁后，用的時(shí)候在加載，也可以parse之后load進(jìn)來(lái)嗦枢，存文本攀芯。
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 }
到這里我們就已經(jīng)解析完了js，下面我們來(lái)解析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 = [] //遠(yuǎn)程的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內(nèi)部的文本是需要我們放在當(dāng)前頁(yè)面內(nèi)部的，同之前一樣氧秘，我們?cè)趯?xiě)一個(gè)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內(nèi)部的script去掉
}
完成
