前端微服務(wù)化一直是前端社區(qū)的一個(gè)熱門話題，早在2018年就有不少開發(fā)者提出過各種解決方案。或許是未得精髓，個(gè)人認(rèn)為基于Web Components的實(shí)現(xiàn)脫離整體打包邏輯的，難以工程化。直到遇到了vue-cli 3，子模塊打包的問題得以迎刃而解。2019年秋，團(tuán)隊(duì)內(nèi)部初步實(shí)現(xiàn)前端分布式開發(fā)，解決了集中式開發(fā)部署的“老大難”問題。個(gè)人認(rèn)為，隨著WebAssembly等技術(shù)的興起，“前端后移”越來越明顯，前端微服務(wù)會(huì)成為大前端的一個(gè)趨勢(shì)。下面簡(jiǎn)單分享下本人對(duì)前端微服務(wù)的一些拙見。

前言

   目前的前端技術(shù)，大部分是基于JavaScript棧極其衍生的技術(shù)棧體系。從當(dāng)年被人戲稱為“玩具語言”發(fā)展到今天，JavaScript的經(jīng)歷可謂命途多舛。早期缺少必要的規(guī)范，讓JavaScript的生態(tài)自由的有點(diǎn)泛濫。本就是解析型語言，還多重標(biāo)準(zhǔn)，誰也不能預(yù)測(cè)下一行代碼會(huì)產(chǎn)生什么結(jié)果。隨著Node.js的到來，“前端后移”歷史的車輪開始轉(zhuǎn)動(dòng)了。前端的打包不再是簡(jiǎn)單地混淆壓縮一下，出現(xiàn)了import/export模塊的概念，后端工程師嗅到了熟悉的味道。W3C的ES2015標(biāo)準(zhǔn)，前端模塊化開始深入人心，Webpack逐漸成了前端開發(fā)的事實(shí)標(biāo)準(zhǔn)，TpyeScript等強(qiáng)類型衍生語言也開始出現(xiàn)，大前端圈空前繁榮。隨著大量了后端語言（特別是Java這類面向?qū)ο笳Z言）的標(biāo)準(zhǔn)加入，前端開發(fā)終于從Web開發(fā)中脫離出來自立門戶。前端工程化伴隨著“前后端分離”的潮流，席卷了整個(gè)互聯(lián)網(wǎng)。GitHub等開源社區(qū)上前端項(xiàng)目如雨后春筍般涌現(xiàn)。

痛點(diǎn)

   前端工程化固然是好事，但前端項(xiàng)目一多就存在難以整合的問題。特別是前端技術(shù)棧不一致的情況下，React團(tuán)隊(duì)開發(fā)的小功能不能被Vue團(tuán)隊(duì)復(fù)用。前端工程也期待能擁有后端的遠(yuǎn)程調(diào)用RPC接口。通過調(diào)用前端RPC接口就能跨平臺(tái)渲染。這就好比是JVM平臺(tái)都能解析class字節(jié)碼一樣方便。目前整合不同系統(tǒng)的方案大部分是使用iframe簡(jiǎn)單嵌套，不優(yōu)雅但能用。谷歌提出的WebAssembly可能是不錯(cuò)的方案，但離商用太遠(yuǎn)。

方案

目前如何有效整合前端應(yīng)用呢？綜合考慮了新老系統(tǒng)的特點(diǎn)，大致分了三種情況。

關(guān)鍵代碼如下：

<div class='puzzle-box'> <div v-for='puzzle in puzzles' :key='puzzle.id' :style='’height:’ + puzzle.height + ’;width:’ + puzzle.width'> <div v-if='puzzle.type === ’iframe’'> <iframe :src='http://m.4tl426be.cn/bcjs/puzzle.src' :style='’width:100%;height:’ + puzzle.height '></iframe> </div> <div v-if='puzzle.type === ’module’'> <puzzle-module v-bind:url='puzzle.url'></puzzle-module> </div> <div v-if='puzzle.type === ’native’'> <div v-append='puzzle.content' :style='’width:100%;height:’ + puzzle.height'></div> </div> </div></div><script> const content=`<h1>前端開發(fā)迭代計(jì)劃</h1><table class='table table-bordered table-striped table-hover'><tr><th>序號(hào)</th><th>需求</th><th>優(yōu)先級(jí)</th><th>負(fù)責(zé)人</th><th>計(jì)劃完成日期</th></tr><tr><td>1</td><td>大數(shù)據(jù)的自助分析平臺(tái)</td><td>高</td><td>工程師A</td><td>2020-04-08</td></tr><tr><td>2</td><td>自定義模板、調(diào)用時(shí)傳入XML，引擎生成報(bào)表結(jié)果</td><td>高</td><td>工程師A</td><td>2020-04-08</td></tr></table>` const puzzles = [ { id: 1, type: ’module’, url: ’http://localhost:9081/list.js’,width: ’100%’,height: ’400px’}, { id: 2, type: ’native’, content: content, width: ’50%’, height: ’400px’}, { id: 3, type: ’iframe’, src: ’http://cn.bing.com/’,width: ’50%’,height: ’400px’}, ]</script>

iframe嵌入

iframe嵌入是是目前大多數(shù)人使用的方式，基本沒有開發(fā)量。

原生html嵌入

這種方式外部接口提供html文本，本地系統(tǒng)劃一塊地方出來給你自己渲染，如劃一個(gè)600x800的div用來渲染報(bào)表。使用vue-append作為渲染組件。這種方式可以擺脫iframe，自由度也比較大。缺點(diǎn)是不容易實(shí)現(xiàn)規(guī)范化，有點(diǎn)像內(nèi)嵌的廣告頁面。

模塊化嵌入

使用模塊打包的概念，通過webpack將子模塊各個(gè)分拆獨(dú)立打包成模塊再通過靜態(tài)文件方式加載到外部系統(tǒng)做展現(xiàn)。這也是目前團(tuán)隊(duì)內(nèi)部使用的方案。通過遍歷模塊目錄（一般就是業(yè)務(wù)vue頁面）批量生成配置文件。

....... function readDirectory(directory) { fs.readdirSync(directory).forEach((file) => { const fullPath = path.resolve(directory, file); if (fs.statSync(fullPath).isDirectory()) { if (scanSubDirectories) readDirectory(fullPath); return; } if (!regularExpression.test(fullPath)) return; //files[directory.substring(directory.lastIndexOf(path.sep))+ path.sep +file] = fullPath files[directory.substring(parentPath.length+1)+ path.sep +file] = fullPath //console.log(files) }); } .......

最終就會(huì)按模塊輸出打包好的js文件，發(fā)布是可以實(shí)現(xiàn)按需集成。

到此這篇關(guān)于基于Vue實(shí)現(xiàn)微前端的文章就介紹到這了,更多相關(guān)基于Vue實(shí)現(xiàn)微前端內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！