使用開源微前端架構 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 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-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 指令，就成功了：

Add 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 檔案的内容為：

Create micro-frontends template

在這一步中，您将建立另一個 HTML 檔案，該檔案将作為 React 建立 React 微前端的模闆。

轉到 react-core-mf/public 并建立一個名為 app.html 的新檔案。 将此代碼粘貼到檔案中：

Configure webpack

在這一步中，我們配置 webpack 并調整依賴項，以便更輕松地開發和建構應用程式。

修改 react-core-mf/config/webpack-config.js：

加上一行：

删除這一行：

以及：

新的 plugin：

Create 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 參數看起來更好：

Create “Home” view

在這一步中，您将使用 React 建立您的第一個微前端（又名視圖）。 這是一個帶有歡迎資訊的簡單“首頁”視圖。

導航到 react-core-mf/src 并建立一個名為 views 的檔案夾。

建立一個 Home.jsx 檔案：

Configure router for “Home” view

在此步驟中，您将對 React 應用程式的入口點 index.js 進行更改。您将為上一步中建立的“首頁”視圖配置路由器，并導入 Luigi Client。

打開 react-core-mf/src/index.js 并将其内容更改為：

Create more views with React

在這一步中，您将建立更多 React 微前端，包括産品清單和産品詳細資訊。

導航到 react-core-mf/src/views 并建立一個包含以下内容的檔案 List.jsx：

Products.jsx：

Add “Products” view to Luigi app

在這一步中，您将在 Luigi 中為“産品”微前端添加一個導航節點。

編輯 react-core-mf/public/luigi-config.js：

在導航中添加一個新的“産品”節點：

Step 12: Add “Product Detail” view to Luigi app

在此步驟中，您将向應用程式添加 ProductDetail.jsx 視圖。 您将能夠通過 Luigi 動态參數顯示每個産品的詳細資訊，在本例中名為 :id。

檔案 luigi-config.js 的内容為

Step 13: Use Luigi link manager for routing

在這一步中，我們将使用 Luigi 來提供微前端的路由，而不是使用 React。 Luigi Client 的 linkManager 功能是導航到每個産品的 id 頁面的最簡單方法。