使用开源微前端框架 Luigi 创建一个基于微前端架构的工程-阿里云开发者社区

开发者社区> -技术小能手-> 正文

使用开源微前端框架 Luigi 创建一个基于微前端架构的工程

简介: 使用开源微前端框架 Luigi 创建一个基于微前端架构的工程
+关注继续查看

官网地址


微前端通常被称为“前端微服务”。 它们允许您将大型单体前端分解为独立的、可扩展的、可以协同工作的独立部分。 微前端架构对于复杂的产品或拥有众多团队的公司尤其有用,可以帮助您创建一致的 Web 应用程序。


观看此视频,其中解释了微前端架构的基础知识以及如何使用 Luigi 实现。


Luigi 是一个用 Svelte 编写的开源微前端框架。 它允许您创建一致的用户界面和导航,同时还提供其他功能以使开发更容易。 它的外观基于基本库样式。 Luigi 与技术无关,允许您使用 React、Angular、UI5 或任何其他技术构建应用程序并向其添加微前端。


Luigi Fiddle 是一个测试游乐场,您可以在其中感受 Luigi。


这张图描绘了 Luigi 的基本架构:image.pngLuigi terminology

这是一小部分 Luigi 术语:


Luigi Core - 指其中显示微前端的主要应用程序。 它包括顶部和侧面导航以及与主应用程序相关的所有其他设置。


Luigi Client - 这个术语涵盖了 Luigi 提供的所有与微前端相关的设置。 微前端可通过 Luigi Client API 进行配置。


parameters - 参数是用于配置 Luigi 应用程序的元素。


导航节点 - Luigi 中侧面导航的各个链接。


Contexts - 上下文是 Luigi 参数,允许您将对象传递到微前端。


Views - 视图,微前端的另一个名称。


本系列文章,我们将从头开始使用 Luigi 创建一个应用程序。它将基于网络购物平台的理念,并将包括其他功能,例如用于以英语和德语显示网站的本地化。


该应用程序由三个主要部分组成:


使用 React 构建的 Luigi Core 应用程序:“主应用程序”,其中包含微前端并包括无论您导航到应用程序的哪个子页面都保持一致的顶部和侧面导航。


使用 React 构建的微前端:它们包括主页、“产品”页面和包含每个产品信息的“产品详细信息”列表。


使用 UI5 构建的微前端:“订单历史”页面,显示已购买产品的数量和价格。


最后,您完成的应用程序的主页应如下所示:image.png完整源代码

命令行 npm i create-react-app:image.png然后是命令行:npx create-react-app react-core-mf

image.pngimage.pngimage.pngInstall dependencies

If you haven’t already done so, make sure you install SAP Fonts.


跳转到 core app 去:cd react-core-mf


安装依赖:


npm i -P @luigi-project/core @luigi-project/client fundamental-styles fundamental-react @sap-theming/theming-base-content react-router-dom


npm i copy-webpack-plugin webpack webpack-cli @babel/core @babel/preset-env babel-loader --save-devimage.png

Create UI5 micro-frontend

创建一个 ui5-mf 文件夹:image.png命令行创建 ui5 工程:

npm install -g yo generator-easy-ui5image.pngAdd a file with product data

在此步骤中,您将创建一个文件,其中包含有关您的购物应用中在售产品的信息。


在现实的项目实现中,这些数据将由数据库提供。但为简单起见,您将在 .json 文件中创建虚拟数据。该文件将由主应用程序和微前端使用。


Navigate to ui5-mf/uimodule/webapp/model and create a products.json file with the following content:

{
    "ProductCollection": [{
            "id": 101,
            "name": "Logitech Mouse",
            "price": 45.0,
            "stock": 80,
            "icon": "product",
            "currencyCode": "EUR",
            "orderQuantity": 2,
            "description": "LIGHTSPEED Wireless Gaming Mouse with HERO Sensor"
        },
        {
            "id": 102,
            "name": "Logitech Keyboard",
            "price": 50.0,
            "stock": 22,
            "icon": "product",
            "currencyCode": "EUR",
            "orderQuantity": 1,
            "description": "A physical keyboard that uses an individual spring and switch for each key. Today, only premium keyboards are built with key switches; however, they were also used in the past, such as in the Model M keyboard from IBM, which used buckling spring switches"
        },
        {
            "id": 103,
            "name": "HP Optical Mouse",
            "price": 35.0,
            "stock": 4,
            "icon": "product",
            "currencyCode": "EUR",
            "orderQuantity": 2,
            "description": "Utilizing the latest optical sensing technology, the HP USB Optical Scroll Mouse records precise motion."
        },
        {
            "id": 104,
            "name": "MacBook Pro",
            "price": 1299.0,
            "stock": 11,
            "icon": "laptop",
            "currencyCode": "EUR",
            "orderQuantity": 3,
            "description": "It features a touch-sensitive OLED display strip located in place of the function keys, a Touch ID sensor integrated with the power button, a butterfly mechanism keyboard similar to the MacBook, and four USB-C ports that also serve as Thunderbolt 3 ports."
        },
        {
            "id": 105,
            "name": "Magic Mouse",
            "price": 40.0,
            "stock": 20,
            "icon": "product",
            "currencyCode": "EUR",
            "orderQuantity": 6,
            "description": "The Magic Mouse 2 (Apple Magic Mouse 2), is a computer mouse developed and released by Apple Inc. It features a multi-touch acrylic surface for scrolling. ... The mouse features a lithium-ion rechargeable battery and Lightning connector for charging and pairing."
        },
        {
            "id": 106,
            "name": "Brother Printer",
            "price": 235.0,
            "stock": 24,
            "icon": "fx",
            "currencyCode": "EUR",
            "orderQuantity": 1,
            "description": "Our affordable, quality machines provide you with the optimal way to take care of all your printing needs. Shop for the right printer, all-in-one, or fax machine for your home or home office today."
        },
        {
            "id": 107,
            "name": "iPhone 11",
            "price": 835.0,
            "stock": 45,
            "icon": "iphone",
            "currencyCode": "EUR",
            "orderQuantity": 8,
            "description": "The iPhone 11 dimensions are 150.9mm x 75.7mm x 8.3mm (H x W x D). It weighs about 194 grams (6.84 ounces).It features a 6.1-inch all-screen LCD display and is powered by Apple new A13 bionic chip with Third-Generation Neural Engine."
        },
        {
            "id": 108,
            "name": "Google Pixel 3a",
            "price": 299.0,
            "stock": 54,
            "icon": "desktop-mobile",
            "currencyCode": "EUR",
            "orderQuantity": 7,
            "description": "At 5.6 inches, the Google Pixel 3a display is proportionate to the relatively small body of the phone – that is to say, it is rather small. The display is Full HD+ and OLED, with a resolution of 2220 x 1080, and because of the relatively small screen size the pixels per inch count is rather high at 441."
        },
        {
            "id": 109,
            "name": "PlayStation 4",
            "price": 330.0,
            "stock": 94,
            "icon": "video",
            "currencyCode": "EUR",
            "orderQuantity": 1,
            "description": "PS4 is the fourth home video game console produced by Sony Computer Entertainment and is compatible with the PlayStation 3. It was officially announced at a press conference on February 20, 2013 and launched on November 15, 2013."
        },
        {
            "id": 110,
            "name": "Dell Monitor",
            "price": 630.0,
            "stock": 20,
            "icon": "sys-monitor",
            "currencyCode": "EUR",
            "orderQuantity": 3,
            "description": "34'' U3419W Monitor, Display with stand Height adjustable (115 mm), tiltable (-5° to 21°), rotatable (-30° to 30°) Security slot (cable lock sold separately), anti-theft slot for locking to stand (for display). Includes: DisplayPort cable, HDMI cable, Power cable, Stand, USB 3.0 Type-A to Type-B cable, USB-C cable"
        }
    ]
}

Prepare React app

此步骤为您的开发做好准备。 为了能够使用 webpack 并完全控制您的 React 应用程序,您需要触发 npm run eject 命令。


cd react-core-mf


执行下列命令行。 请注意,由于此命令的工作方式,npm run eject 可能会失败。如果出现错误,则需要在运行命令之前提交任何更改。


npm run eject


如果遇到下面的错误消息:

image.png解决方案:

  • git add .
  • git commit -am “Save before ejecting”

之后重新执行 eject 命令,就成功了:image.pngAdd Luigi to index.html

In this step, you will let Luigi take control of the index.hmtl file - the entry point for your app.


编辑 react-core-mf/public/index.html 文件的内容为:image.pngCreate micro-frontends template

在这一步中,您将创建另一个 HTML 文件,该文件将作为 React 创建 React 微前端的模板。


转到 react-core-mf/public 并创建一个名为 app.html 的新文件。 将此代码粘贴到文件中:

image.png

Configure webpack

在这一步中,我们配置 webpack 并调整依赖项,以便更轻松地开发和构建应用程序。

修改 react-core-mf/config/webpack-config.js:image.png加上一行:

image.png删除这一行:

image.png以及:image.png新的 plugin:

image.pngCreate Luigi configuration file

在这一步中,您将创建一个 Luigi 配置文件。 这是任何 Luigi 应用程序的中心点。 它允许您配置一致的导航和许多其他 Luigi 功能。


react-core-mf/public 目录下面新建一个配置文件:luigi-config.js.


在现实生活中,您可以为配置文件指定任何您想要的名称或创建多个文件。 唯一重要的是使用正确的 Luigi 参数和语法,这将在下一步中介绍。


Configure Luigi for “Home” node

借助与导航和常规设置有关的简单参数,您将创建您的第一个“主页”导航节点并使您的应用程序具有响应性。


这些是您将使用的 Luigi 导航参数:


pathSegment - 添加到 URL 的文本段

label - 导航中显示的节点的名称

icon - 标签旁边显示的 SAP 图标

viewUrl - 微前端的 URL

使用下面的代码,您将为您的页面配置标题,并使您的应用程序在移动设备上使用 responseNavigation 参数看起来更好:

image.png

Create “Home” view

在这一步中,您将使用 React 创建您的第一个微前端(又名视图)。 这是一个带有欢迎信息的简单“主页”视图。

导航到 react-core-mf/src 并创建一个名为 views 的文件夹。

新建一个 Home.jsx 文件:image.pngConfigure router for “Home” view

在此步骤中,您将对 React 应用程序的入口点 index.js 进行更改。您将为上一步中创建的“主页”视图配置路由器,并导入 Luigi Client。


打开 react-core-mf/src/index.js 并将其内容更改为:

image.png

Create more views with React

在这一步中,您将创建更多 React 微前端,包括产品列表和产品详细信息。

导航到 react-core-mf/src/views 并创建一个包含以下内容的文件 List.jsx:image.pngProducts.jsx:

image.png

Add “Products” view to Luigi app

在这一步中,您将在 Luigi 中为“产品”微前端添加一个导航节点。

编辑 react-core-mf/public/luigi-config.js:

在导航中添加一个新的“产品”节点:image.pngStep 12: Add “Product Detail” view to Luigi app

在此步骤中,您将向应用程序添加 ProductDetail.jsx 视图。 您将能够通过 Luigi 动态参数显示每个产品的详细信息,在本例中名为 :id。


文件 luigi-config.js 的内容为image.png

Step 13: Use Luigi link manager for routing

在这一步中,我们将使用 Luigi 来提供微前端的路由,而不是使用 React。 Luigi Client 的 linkManager 功能是导航到每个产品的 id 页面的最简单方法。


版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用Harp快速开发前端页面
有了node以后,像gulp,grunt等一些工具可以给我们的前端开发带来很大的便利,但是gulp和grunt对于刚学习前端的人来说有些难度,我们就使用Harp,harp使用起来非常简单,但是功能却基本满足我们的页面开发需求。
874 0
从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object
原文:从零开始学习 asp.net core 2.1 web api 后端api基础框架(三)-创建Data Transfer Object 版权声明:本文为博主原创文章,未经博主允许不得转载。
822 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12064 0
Framework7 – 赞!功能齐全的 iOS7 App 前端框架
  Framework7 是一个功能很全的 HTML 框架,用来构建 iOS7 应用程序。 Framework7 允许您灵活搭建列表视图(表视图) 。你可以让他们作为导航菜单,你可以在列表里面使用图标,输入框以及任何元素,甚至使它们嵌套。
738 0
15款帮助我们创建响应式布局的优秀前端框架
  响应式的 Web 设计方法的目的是制作一个更加灵活的网站,能够为用户提供最佳的视觉体验——方便阅读和导航,只需最少的调整就可实现缩放和滚动,支持更广泛的设备,从移动电话到手持设备到台式电脑。下面是一个优秀的网格工具清单,能够帮助更好的创建响应式布局。
1286 0
前端:vue中jsonp插件的使用
前端:vue中jsonp插件的使用
5 0
1727
文章
0
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载