本發(fā)明涉及前端開發(fā)應(yīng)用，尤其涉及基于qiankun的微前端架構(gòu)方法、裝置、計(jì)算機(jī)設(shè)備及存儲(chǔ)介質(zhì)。

背景技術(shù)：

1、現(xiàn)有技術(shù)中，做項(xiàng)目開發(fā)時(shí)，需要進(jìn)行多模塊混合開發(fā)。那么當(dāng)混合開發(fā)后，發(fā)布軟件時(shí)則進(jìn)行統(tǒng)一發(fā)布。在一個(gè)批次中如果一個(gè)模塊進(jìn)行了修改，則需要進(jìn)行全模塊全量更新發(fā)布。這樣則在開發(fā)測試階段會(huì)做很多無用功，例如，備件模塊a批次要上線，但是服務(wù)模塊a批次沒有上線要求，但是下個(gè)b批次存在上線要求，則在發(fā)布a批次時(shí)需要順帶發(fā)布服務(wù)模塊并且屏蔽現(xiàn)有開發(fā)功能。并且版本發(fā)布之后，軟件在多使用場景下，無法做到互通。這樣勢必會(huì)增加開發(fā)成本，降低開發(fā)效率。

技術(shù)實(shí)現(xiàn)思路

1、本發(fā)明實(shí)施例的目的在于提出一種基于qiankun的微前端架構(gòu)方法、裝置、計(jì)算機(jī)設(shè)備及存儲(chǔ)介質(zhì)，以解決現(xiàn)有技術(shù)中多模塊混合開發(fā)時(shí)，只修改部分模塊但是升級(jí)時(shí)要全模塊全量更新發(fā)布，增加開發(fā)成本，降低開發(fā)效率的問題。

2、為了解決上述技術(shù)問題，本發(fā)明提供一種基于qiankun的微前端架構(gòu)方法，采用了如下所述的技術(shù)方案，包括：

3、通過html和js構(gòu)建控制層，所述控制層用于微前端公共功能的開發(fā)迭代；

4、基于所述控制層，通過控制層提供的cli腳手架，拉取代碼，然后將拉取的代碼進(jìn)行打包構(gòu)建業(yè)務(wù)層，所述業(yè)務(wù)層用于發(fā)布業(yè)務(wù)任務(wù)，通過所述業(yè)務(wù)層，創(chuàng)建多個(gè)業(yè)務(wù)模塊；

5、根據(jù)所述控制層，通過cli架構(gòu)創(chuàng)建主應(yīng)用，所述主應(yīng)用用于統(tǒng)一集成各個(gè)業(yè)務(wù)模塊，并且提供公共基礎(chǔ)能力；

6、根據(jù)所述業(yè)務(wù)層，通過cli架構(gòu)創(chuàng)建子應(yīng)用，所述子應(yīng)用用于多個(gè)所述業(yè)務(wù)模塊的業(yè)務(wù)邏輯開發(fā)；

7、部署及發(fā)布所述主應(yīng)用和/或所述子應(yīng)用。

8、優(yōu)選地，所述通過html和js構(gòu)建控制層，所述控制層用于微前端公共功能的開發(fā)迭代的步驟具體包括：

9、獲取權(quán)限校驗(yàn)公共憑證；

10、掛載子應(yīng)用進(jìn)入業(yè)務(wù)層；

11、在子應(yīng)用中直接使用主應(yīng)用提供的能力。

12、優(yōu)選地，所述基于所述控制層，通過控制層提供的cli腳手架，拉取代碼，然后將拉取的代碼進(jìn)行打包構(gòu)建業(yè)務(wù)層，所述業(yè)務(wù)層用于發(fā)布業(yè)務(wù)任務(wù)，通過所述業(yè)務(wù)層，創(chuàng)建多個(gè)業(yè)務(wù)模塊的步驟具體包括：

13、基于控制層提供的cli模版創(chuàng)建項(xiàng)目；

14、構(gòu)建項(xiàng)目發(fā)布應(yīng)用，發(fā)布項(xiàng)目使得可以通過域名訪問；

15、通過掛載集成進(jìn)入主應(yīng)用。

16、優(yōu)選地，所述根據(jù)所述控制層，通過cli架構(gòu)創(chuàng)建主應(yīng)用，所述主應(yīng)用用于統(tǒng)一集成各個(gè)業(yè)務(wù)模塊，并且提供公共基礎(chǔ)能力的步驟具體包括：

17、通過git拉取由控制層提供的cli架構(gòu)的代碼。

18、執(zhí)行npm?run?build:prod命令，得到dist文件目錄。

19、將dist發(fā)布到線上服務(wù)器，通過ngxin代理之后則可以訪問主應(yīng)用。

20、優(yōu)選地，所述根據(jù)所述業(yè)務(wù)層，通過cli架構(gòu)創(chuàng)建子應(yīng)用，所述子應(yīng)用用于多個(gè)所述業(yè)務(wù)模塊的業(yè)務(wù)邏輯開發(fā)的步驟具體包括：

21、基于控制層提供的cli模版創(chuàng)建項(xiàng)目；

22、構(gòu)建項(xiàng)目發(fā)布所述子應(yīng)用，發(fā)布項(xiàng)目使得可以通過域名訪問所述子應(yīng)用；

23、將所述子應(yīng)用通過掛載集成進(jìn)入主應(yīng)用。

24、優(yōu)選地，所述部署及發(fā)布所述主應(yīng)用和/或所述子應(yīng)用的步驟具體包括：

25、將所述主應(yīng)用和/或所述子應(yīng)用，打包npm?run?build:prod，得到dist代碼包；

26、將所述dist代碼包上傳至遠(yuǎn)程服務(wù)器，通過ngxin代理轉(zhuǎn)發(fā)，映射ip之后就可以訪問所述主應(yīng)用和/或子應(yīng)用。

27、為了解決上述技術(shù)問題，本發(fā)明還提供一種基于qiankun的微前端架構(gòu)裝置，采用了如下所述的技術(shù)方案，包括：

28、控制層構(gòu)建模塊，用于通過html和js構(gòu)建控制層，所述控制層用于微前端公共功能的開發(fā)迭代；

29、業(yè)務(wù)層構(gòu)建模塊，用于基于所述控制層，通過控制層提供的cli腳手架，拉取代碼，然后將拉取的代碼進(jìn)行打包構(gòu)建業(yè)務(wù)層，所述業(yè)務(wù)層用于發(fā)布業(yè)務(wù)任務(wù)，通過所述業(yè)務(wù)層，創(chuàng)建多個(gè)業(yè)務(wù)模塊；

30、主應(yīng)用構(gòu)建模塊，用于根據(jù)所述控制層，通過cli架構(gòu)創(chuàng)建主應(yīng)用，所述主應(yīng)用用于統(tǒng)一集成各個(gè)業(yè)務(wù)模塊，并且提供公共基礎(chǔ)能力；

31、子應(yīng)用構(gòu)建模塊，用于根據(jù)所述業(yè)務(wù)層，通過cli架構(gòu)創(chuàng)建子應(yīng)用，所述子應(yīng)用用于多個(gè)所述業(yè)務(wù)模塊的業(yè)務(wù)邏輯開發(fā)；

32、部署及發(fā)布模塊，用于部署及發(fā)布所述主應(yīng)用和/或所述子應(yīng)用。

33、優(yōu)選地，所述控制層構(gòu)建模塊包括：

34、憑證模塊，用于用于獲取權(quán)限校驗(yàn)公共憑證；

35、掛載模塊，用于掛載子應(yīng)用進(jìn)入業(yè)務(wù)層；

36、使用模塊，用于在子應(yīng)用中直接使用主應(yīng)用提供的能力。

37、為了解決上述技術(shù)問題，本發(fā)明還提供一種計(jì)算機(jī)設(shè)備，采用了如下所述的技術(shù)方案，包括存儲(chǔ)器和處理器，所述存儲(chǔ)器中存儲(chǔ)有計(jì)算機(jī)可讀指令，所述處理器執(zhí)行所述計(jì)算機(jī)可讀指令時(shí)實(shí)現(xiàn)上述的基于qiankun的微前端架構(gòu)方法的步驟。

38、為了解決上述技術(shù)問題，本發(fā)明還提供一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，采用了如下所述的技術(shù)方案，所述計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)上存儲(chǔ)有計(jì)算機(jī)可讀指令，所述計(jì)算機(jī)可讀指令被處理器執(zhí)行時(shí)實(shí)現(xiàn)上述的基于qiankun的微前端架構(gòu)方法的步驟。

39、與現(xiàn)有技術(shù)相比，本發(fā)明主要有以下有益效果：首先通過html和js構(gòu)建控制層，控制層用于微前端公共功能的開發(fā)迭代；然后基于控制層，通過控制層提供的cli腳手架，拉取代碼，然后將拉取的代碼進(jìn)行打包構(gòu)建業(yè)務(wù)層，業(yè)務(wù)層用于發(fā)布業(yè)務(wù)任務(wù)，通過業(yè)務(wù)層，創(chuàng)建多個(gè)業(yè)務(wù)模塊；再根據(jù)控制層，通過cli架構(gòu)創(chuàng)建主應(yīng)用，主應(yīng)用用于統(tǒng)一集成各個(gè)業(yè)務(wù)模塊，并且提供公共基礎(chǔ)能力；根據(jù)業(yè)務(wù)層，通過cli架構(gòu)創(chuàng)建子應(yīng)用，子應(yīng)用用于多個(gè)業(yè)務(wù)模塊的業(yè)務(wù)邏輯開發(fā)；最后部署及發(fā)布主應(yīng)用和/或子應(yīng)用；減少因?yàn)榇箜?xiàng)目迭代給項(xiàng)目組帶來的多業(yè)務(wù)模塊發(fā)布問題，實(shí)現(xiàn)按需發(fā)布，能夠同時(shí)查看多環(huán)境數(shù)據(jù)，在保持統(tǒng)一窗口的情況下，能實(shí)時(shí)根據(jù)開發(fā)、測試需求切換環(huán)境，極大的提高了測試修改的效率。

技術(shù)特征：

1.一種基于qiankun的微前端架構(gòu)方法，其特征在于，包括下述步驟：

2.根據(jù)權(quán)利要求1所述的基于qiankun的微前端架構(gòu)方法，其特征在于，所述通過html和js構(gòu)建控制層，所述控制層用于微前端公共功能的開發(fā)迭代的步驟具體包括：

3.根據(jù)權(quán)利要求1所述的基于qiankun的微前端架構(gòu)方法，其特征在于，所述基于所述控制層，通過控制層提供的cli腳手架，拉取代碼，然后將拉取的代碼進(jìn)行打包構(gòu)建業(yè)務(wù)層，所述業(yè)務(wù)層用于發(fā)布業(yè)務(wù)任務(wù)，通過所述業(yè)務(wù)層，創(chuàng)建多個(gè)業(yè)務(wù)模塊的步驟具體包括：

4.根據(jù)權(quán)利要求1所述的基于qiankun的微前端架構(gòu)方法，其特征在于，所述根據(jù)所述控制層，通過cli架構(gòu)創(chuàng)建主應(yīng)用，所述主應(yīng)用用于統(tǒng)一集成各個(gè)業(yè)務(wù)模塊，并且提供公共基礎(chǔ)能力的步驟具體包括：

5.根據(jù)權(quán)利要求1所述的基于qiankun的微前端架構(gòu)方法，其特征在于，所述根據(jù)所述業(yè)務(wù)層，通過cli架構(gòu)創(chuàng)建子應(yīng)用，所述子應(yīng)用用于多個(gè)所述業(yè)務(wù)模塊的業(yè)務(wù)邏輯開發(fā)的步驟具體包括：

6.根據(jù)權(quán)利要求1至5任意一項(xiàng)所述的基于qiankun的微前端架構(gòu)方法，其特征在于，所述部署及發(fā)布所述主應(yīng)用和/或所述子應(yīng)用的步驟具體包括：

7.一種基于qiankun的微前端架構(gòu)裝置，其特征在于，包括：

8.根據(jù)權(quán)利要求7所述的基于qiankun的微前端架構(gòu)裝置，其特征在于，所述控制層構(gòu)建模塊包括：

9.一種計(jì)算機(jī)設(shè)備，包括存儲(chǔ)器和處理器，所述存儲(chǔ)器中存儲(chǔ)有計(jì)算機(jī)可讀指令，所述處理器執(zhí)行所述計(jì)算機(jī)可讀指令時(shí)實(shí)現(xiàn)如權(quán)利要求1至6中任一項(xiàng)所述的基于qiankun的微前端架構(gòu)方法的步驟。

10.一種計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)，其特征在于，所述計(jì)算機(jī)可讀存儲(chǔ)介質(zhì)上存儲(chǔ)有計(jì)算機(jī)可讀指令，所述計(jì)算機(jī)可讀指令被處理器執(zhí)行時(shí)實(shí)現(xiàn)如權(quán)利要求1至6中任一項(xiàng)所述的基于qiankun的微前端架構(gòu)方法的步驟。

技術(shù)總結(jié)
本發(fā)明屬于前端開發(fā)應(yīng)用領(lǐng)域，涉及一種基于qiankun的微前端架構(gòu)方法、裝置、計(jì)算機(jī)設(shè)備及存儲(chǔ)介質(zhì)，所述方法包括通過html和js構(gòu)建控制層，所述控制層用于微前端公共功能的開發(fā)迭代；基于所述控制層，通過控制層提供的cli腳手架，拉取代碼，然后將拉取的代碼進(jìn)行打包構(gòu)建業(yè)務(wù)層，所述業(yè)務(wù)層用于發(fā)布業(yè)務(wù)任務(wù)，通過所述業(yè)務(wù)層，創(chuàng)建多個(gè)業(yè)務(wù)模塊；根據(jù)所述控制層，通過cli架構(gòu)創(chuàng)建主應(yīng)用，所述主應(yīng)用用于統(tǒng)一集成各個(gè)業(yè)務(wù)模塊，并且提供公共基礎(chǔ)能力；根據(jù)所述業(yè)務(wù)層，通過cli架構(gòu)創(chuàng)建子應(yīng)用，所述子應(yīng)用用于多個(gè)所述業(yè)務(wù)模塊的業(yè)務(wù)邏輯開發(fā)；部署及發(fā)布所述主應(yīng)用和/或所述子應(yīng)用。

技術(shù)研發(fā)人員：陳葦林
受保護(hù)的技術(shù)使用者：深圳聯(lián)友科技有限公司
技術(shù)研發(fā)日：
技術(shù)公布日：2025/1/2