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

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

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

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

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

这张图描绘了 Luigi 的基本架构：

Luigi terminology

这是一小部分 Luigi 术语：

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

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

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

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

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

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

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

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

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

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

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

最后，您完成的应用程序的主页应如下所示：

完整源代码

命令行 npm i create-react-app:

然后是命令行：npx create-react-app react-core-mf

Install dependencies

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

跳转到 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-dev

Create UI5 micro-frontend

创建一个 ui5-mf 文件夹：

命令行创建 ui5 工程：

npm install -g yo generator-easy-ui5

Add 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

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

解决方案：

git add .

git commit -am "Save before ejecting"

之后重新执行 eject 命令，就成功了：