微前端通常被稱為“前端微服務”。 它們允許您将大型單體前端分解為獨立的、可擴充的、可以協同工作的獨立部分。 微前端架構對于複雜的産品或擁有衆多團隊的公司尤其有用，可以幫助您建立一緻的 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 建構的微前端：“訂單曆史”頁面，顯示已購買産品的數量和價格。
最後，您完成的應用程式的首頁應如下所示：
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
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
如果遇到下面的錯誤消息：
/* eslint-disable no-undef */
Luigi.setConfig({
navigation: {
nodes: () => [
{
pathSegment: 'home',
label: 'Home',
icon: 'home',
viewUrl: '/app.html#/home',
children: [{
pathSegment: 'products',
label: 'Products',
icon: 'list',
viewUrl: '/app.html#/products'
}]
},
{
pathSegment: 'products',
label: 'Products',
icon: 'list',
viewUrl: '/app.html#/products',
keepSelectedForChildren: true,
children: [{
pathSegment: ':id',
viewUrl: '/app.html#/productDetail/:id'
}]
}
]
},
settings: {
header: {
title: 'Luigi Application',
logo: '/logo.png'
},
responsiveNavigation: 'simpleMobileOnly'
}
}
);
Step 13: Use Luigi link manager for routing
在這一步中，我們将使用 Luigi 來提供微前端的路由，而不是使用 React。 Luigi Client 的 linkManager 功能是導航到每個産品的 id 頁面的最簡單方法。