關(guān)于 React 微前端的一切
幾十年來一直是軟件開發(fā)規(guī)范的單體架構(gòu)正在被微服務(wù)取代，作為一種替代策略。最初，單片設(shè)計(jì)的成功由來已久。因此，一些軟件供應(yīng)商和行業(yè)領(lǐng)導(dǎo)者堅(jiān)信它的好處。但隨著時(shí)代的變化，新的技術(shù)進(jìn)步似乎比每個(gè)人似乎都習(xí)慣的更有優(yōu)勢(shì)。
React 微前端架構(gòu)并不是一個(gè)新概念；相反，它是早期架構(gòu)模式的進(jìn)步。社交媒體、云計(jì)算和物聯(lián)網(wǎng)的顛覆性創(chuàng)新趨勢(shì)正在嚴(yán)重影響微服務(wù)架構(gòu)平臺(tái)快速滲透市場(chǎng)。
由于轉(zhuǎn)向持續(xù)部署。微服務(wù)以React 微前端的形式通過以下方式幫助企業(yè)：
構(gòu)建的可擴(kuò)展性
快速部署
技術(shù)獨(dú)立
無絕緣故障
高效升級(jí)遷移
高可部署性和自動(dòng)化
減少安全威脅和可靠性
開發(fā)時(shí)間縮短且成本更低
吸引工程師
使用 React 構(gòu)建微前端 [教程]
讓我們向您展示構(gòu)建 React 微前端的教程指南。在這里，我們將構(gòu)建兩個(gè)應(yīng)用程序，即主機(jī)和遠(yuǎn)程；其中主要應(yīng)用程序是主機(jī)，另一個(gè)將是我們插入其中的子應(yīng)用程序。
主機(jī)應(yīng)用程序?qū)⑹俏覀兊摹爸鳌睉?yīng)用程序，而遠(yuǎn)程應(yīng)用程序?qū)⑹遣迦肫渲械淖討?yīng)用程序。
首先，我們將使用 create-react-app 創(chuàng)建一個(gè)基本的 React 應(yīng)用程序。
1. 在你的根目錄
npx create-react-app 主機(jī)應(yīng)用程序
npx create-react-app 遠(yuǎn)程應(yīng)用程序
這將為您創(chuàng)建兩個(gè)應(yīng)用程序：
1. 主機(jī)應(yīng)用程序/
2. 遠(yuǎn)程應(yīng)用程序/
2.添加依賴
在每個(gè) host-app/ 和 remote-app/ 運(yùn)行中：
npm install –save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader css-loader
這將安裝 webpack 配置所需的 webpack 和依賴項(xiàng)。
注意：-Webpack Module Federation 在 webpack 5 及以上版本中可用。
添加依賴項(xiàng)后，我們可以托管我們的應(yīng)用程序。
您是否希望為您的用戶創(chuàng)建一個(gè) React 微前端應(yīng)用程序，以便他們快速找到他們的解決方案并擴(kuò)展您的業(yè)務(wù)？
從 Bacancy聘請(qǐng) Reactjs 開發(fā)人員，因?yàn)槲覀兪乔岸司薮罂赡苄缘脑缙诓捎谜摺Ｎ覀兘?jīng)驗(yàn)豐富的 React 開發(fā)人員在行業(yè)范圍內(nèi)的大小領(lǐng)域擁有多年的經(jīng)驗(yàn)。
3.托管應(yīng)用程序
讓我們從我們的 webpack 配置開始
在 host-app/ & remote-app/ 的根目錄下創(chuàng)建一個(gè)新的 webpack.config.js 文件：
//host-app/webpack.config.jsconst HtmlWebpackPlugin = require("html-webpack-plugin");
模塊.exports = {
條目：“./src/index”，
模式：“發(fā)展”，
開發(fā)服務(wù)器：{
端口：3000，
},
模塊： {
規(guī)則：[
{
測(cè)試：/\.(js|jsx)?$/,
排除：/node_modules/，
使用： [
{
裝載機(jī)：“巴別塔裝載機(jī)”，
選項(xiàng)： {
預(yù)設(shè)：[“@babel/preset-env”，“@babel/preset-react”]，
},
},
],
},
{
測(cè)試：/\.css$/i,
使用：["style-loader", "css-loader"],
},
],
},
插件：[
新的 HtmlWebpackPlugin({
模板：“./public/index.html”，
網(wǎng)站圖標(biāo)：“./public/favicon.ico”，
清單：“./public/manifest.json”，
}),
],
解決： {
擴(kuò)展名：[".js", ".jsx"],
},
目標(biāo)：“網(wǎng)絡(luò)”，};
// 遠(yuǎn)程應(yīng)用程序/webpack.config.jsconst HtmlWebpackPlugin = require("html-webpack-plugin");const path = require("路徑");
模塊.exports = {
條目：“./src/index”，
模式：“發(fā)展”，
開發(fā)服務(wù)器：{
靜止的： {
目錄：path.join(__dirname, "public"),
},
端口：4000，
},
模塊： {
規(guī)則：[
{
測(cè)試：/\.(js|jsx)?$/,
排除：/node_modules/，
使用： [
{
裝載機(jī)：“巴別塔裝載機(jī)”，
選項(xiàng)： {
預(yù)設(shè)：[“@babel/preset-env”，“@babel/preset-react”]，
},
},
],
},
{
測(cè)試：/\.css$/i,
使用：["style-loader", "css-loader"],
},
{
測(cè)試：/\.(gif|png|jpe?g|svg)$/,
使用： [
{
裝載機(jī)：“文件裝載機(jī)”，
選項(xiàng)： {
名稱：“[名稱]。[分機(jī)]”，
輸出路徑：“資產(chǎn)/圖像/”，
},
},
],
},
],
},
插件：[
新的 HtmlWebpackPlugin({
模板：“./public/index.html”，
網(wǎng)站圖標(biāo)：“./public/favicon.ico”，
清單：“./public/manifest.json”，
}),
],
解決： {
擴(kuò)展名：[".js", ".jsx"],
},
目標(biāo)：“網(wǎng)絡(luò)”，};
這個(gè)基本的 webpack 示例是使用 babel-loader 轉(zhuǎn)換我們的 js 和 jsx 代碼并注入到 HTML 模板中。
更改 package.json 中的啟動(dòng)腳本以利用我們的 webpack 配置：-
“腳本”：{
“開始”：“網(wǎng)絡(luò)包服務(wù)”
}
index.js（兩個(gè)應(yīng)用程序相同）
首先，我們需要 index.js 作為我們應(yīng)用程序的入口。我們正在導(dǎo)入的另一個(gè)文件是 bootstrap.js，它呈現(xiàn) React 應(yīng)用程序。
我們需要這個(gè)額外的間接層，因?yàn)樗鼤?huì)讓 Webpack 有機(jī)會(huì)加載渲染遠(yuǎn)程應(yīng)用程序所需的所有導(dǎo)入。
否則，您將看到如下錯(cuò)誤：
共享模塊不可用于急切消費(fèi)
//主機(jī)應(yīng)用程序/src/index.js//遠(yuǎn)程應(yīng)用程序/src/index.js導(dǎo)入（“./bootstrap”）;
// 注意：使用 import() 語句動(dòng)態(tài)導(dǎo)入引導(dǎo)程序文件很重要，否則您將看到相同的錯(cuò)誤。
bootstrap.js（兩個(gè)應(yīng)用程序相同）
接下來，我們?yōu)槌尸F(xiàn)我們的 React 應(yīng)用程序的兩個(gè)存儲(chǔ)庫定義 bootstrap.js 文件。
從“反應(yīng)”導(dǎo)入反應(yīng)；從“react-dom/client”導(dǎo)入 ReactDOM；從“./App”導(dǎo)入應(yīng)用程序；
const root = ReactDOM.createRoot(document.getElementById("root"));root.render(
< 反應(yīng)。嚴(yán)格模式 >
< 應(yīng)用 / >
</React.StrictMode>);
App.js（在主機(jī)應(yīng)用程序中）
現(xiàn)在我們可以在應(yīng)用程序的主要邏輯發(fā)生的地方編寫我們的 App.js 文件。在這里，我們將從稍后定義的遠(yuǎn)程加載兩個(gè)組件。
import(“Remote/App”) 將動(dòng)態(tài)獲取 Remote 應(yīng)用程序的 App.js React 組件。
我們需要使用延遲加載器和ErrorBoundary組件來為用戶創(chuàng)造流暢的體驗(yàn)，以防抓取花費(fèi)很長(zhǎng)時(shí)間或在我們的主機(jī)應(yīng)用程序中引入錯(cuò)誤。
// 主機(jī)應(yīng)用程序/src/App.js從“反應(yīng)”導(dǎo)入反應(yīng)；從“./ErrorBoundary”導(dǎo)入 ErrorBoundary；const RemoteApp = React.lazy(() => import("Remote/App"));const RemoteButton = React.lazy(() => import("Remote/Button"));
const RemoteWrapper = ({ children }) => (
<分區(qū)
樣式={{
border: "1px 純紅色",
背景：“白色”，
}}
>
<ErrorBoundary>{子級(jí)}</ErrorBoundary>
</div>);
導(dǎo)出常量 App = () => (
<div style={{ 背景：“rgba(43, 192, 219, 0.3)” }}>
<h1>這是主持人！</h1>
<h2>遠(yuǎn)程應(yīng)用：</h2>
<RemoteWrapper>
<遠(yuǎn)程應(yīng)用 />
</RemoteWrapper>
<h2>遠(yuǎn)程按鈕：</h2>
<RemoteWrapper>
<遠(yuǎn)程按鈕/>
</RemoteWrapper>
<br />
<a href="http://localhost:4000">遠(yuǎn)程應(yīng)用鏈接</a>
</div>);導(dǎo)出默認(rèn)應(yīng)用程序；
您可以從此存儲(chǔ)庫添加 ErrorBoundary 組件。
添加模塊聯(lián)合（在主機(jī)應(yīng)用程序中）
我們還沒有準(zhǔn)備好運(yùn)行該應(yīng)用程序。接下來，我們需要添加 Module Federation 來告訴我們的主機(jī)從哪里獲取 Remote/App 和 Remote/Button 組件。
在我們的 webpack.config.js 中我們引入了 ModuleFederationPlugin：
將以下代碼添加到插件中。
// host-app/webpack.config.jsconst ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");const { dependencies } = require("./package.json");
模塊.exports = {
//...
插件：[
新的 ModuleFederationPlugin({
名稱：“主機(jī)”，
遙控器：{
遠(yuǎn)程：` Remote@http ://localhost:4000/moduleEntry.js`，
},
共享：{
...依賴關(guān)系，
反應(yīng)：{
單例：是的，
requiredVersion: dependencies["反應(yīng)"],
},
“反應(yīng)-dom”：{
單例：是的，
requiredVersion: dependencies["react-dom"],
},
},
}),
],};
需要注意的重要事項(xiàng)：
名稱：-用于區(qū)分模塊。
Remotes：-這是我們定義要在此應(yīng)用程序中使用的聯(lián)合模塊的地方。您會(huì)注意到我們將 Remote 指定為內(nèi)部名稱，以便我們可以使用 import(“Remote/
共享：-這是我們?cè)谀K之間共享依賴關(guān)系的方式。這對(duì) React 來說非常重要，因?yàn)樗幸粋€(gè)全局狀態(tài)，這意味著你應(yīng)該在任何給定的應(yīng)用程序中只運(yùn)行一個(gè) React 和 ReactDOM 實(shí)例。為了在我們的架構(gòu)中實(shí)現(xiàn)這一點(diǎn)，我們告訴 webpack 將 React 和 ReactDOM 視為單例，因此從任何模塊加載的第一個(gè)版本將用于整個(gè)應(yīng)用程序。只要滿足我們定義的 requiredVersion 即可。我們還從 package.json 導(dǎo)入所有其他依賴項(xiàng)并將它們包含在這里，因此我們可以最大限度地減少模塊之間重復(fù)依賴項(xiàng)的數(shù)量。
現(xiàn)在，如果我們?cè)谥鳈C(jī)應(yīng)用程序中運(yùn)行 npm start，我們將能夠在屏幕上看到輸出。
這意味著我們的主機(jī)應(yīng)用程序已配置，但我們的遠(yuǎn)程應(yīng)用程序尚未公開任何內(nèi)容。所以我們也需要配置它。
對(duì)于遠(yuǎn)程應(yīng)用
讓我們從 webpack 配置文件開始。由于我們配置了它的host-app，我們對(duì)Module Federation有了一些了解：
將以下代碼添加到插件中。
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");const { dependencies } = require("./package.json");
新的 ModuleFederationPlugin({
名稱：“遠(yuǎn)程”，
文件名：“moduleEntry.js”，
暴露：{
"./App": "./src/App",
"./Button": "./src/Button",
},
共享：{
...依賴關(guān)系，
反應(yīng)：{
單例：是的，
requiredVersion: dependencies["反應(yīng)"],
},
“反應(yīng)-dom”：{
單例：是的，
requiredVersion: dependencies["react-dom"],
},
},
}),
我們可以從上面的代碼中注意到的重要事項(xiàng)是：
我們的 webpack 開發(fā)服務(wù)器運(yùn)行在 localhost:4000
遠(yuǎn)程模塊的名稱是 Remote
文件名為 moduleEntry.js
結(jié)合這些將允許我們的主機(jī)應(yīng)用程序在Remote@http ://localhost:4000/moduleEntry.js找到遠(yuǎn)程應(yīng)用程序的代碼
exposes 是我們定義要在 moduleEntry.js 文件中共享的代碼的地方。這里我們暴露了兩個(gè)文件：<App/>和<Button/>。
現(xiàn)在我們可以設(shè)置這些組件和我們的 Remote 應(yīng)用程序，以便它可以獨(dú)立運(yùn)行。
從“反應(yīng)”導(dǎo)入反應(yīng)；
導(dǎo)出常量 App = () => {
返回 <div>來自遠(yuǎn)程應(yīng)用程序的問候</div>；};導(dǎo)出默認(rèn)應(yīng)用程序；
我們還想公開一個(gè)<按鈕/>組件.
從“反應(yīng)”導(dǎo)入反應(yīng)；
export const Button = () => <button>你好！</button>;
導(dǎo)出默認(rèn)按鈕；
現(xiàn)在我們已經(jīng)配置了 Remote 應(yīng)用程序，如果您運(yùn)行 npm start 我們可以看到一個(gè)空白頁面，上面寫著“Hello from the other side”。
現(xiàn)在您可以將兩個(gè)存儲(chǔ)庫放在一個(gè)文件夾中，并通過一個(gè)命令啟動(dòng)它們：-
微前端演示/主機(jī)應(yīng)用程序微前端演示/遠(yuǎn)程應(yīng)用程序運(yùn)行 npm init -y
將創(chuàng)建一個(gè) package.json 文件?，F(xiàn)在在 package.json 中添加以下更改：-
“工作區(qū)”：{
“包裹”：[
“主持人”，
“偏僻的”
]
},
“腳本”：{“開始”：“npm run start:host & npm run start:remote”,
"start:host": "cd ./host-app && npm start",
“開始：遠(yuǎn)程”：“cd ./remote-app && npm start”，
"start:all": "yarn workspaces run start",
“清理”：“紗線工作區(qū)運(yùn)行清理”
},
這將在一個(gè)命令中運(yùn)行兩個(gè) repos。你可以看到輸出。
結(jié)論
開發(fā)者不建議使用 create-react-app 命令創(chuàng)建 React 微前端 App。但是，我們希望本教程對(duì)您有所幫助。
通常，一些關(guān)鍵元素對(duì)微前端架構(gòu)的流行和發(fā)展勢(shì)頭做出了重大貢獻(xiàn)。大部分基于產(chǎn)品的業(yè)務(wù)使用微前端架構(gòu)來加速和降低開發(fā)成本。在未來幾年，整體設(shè)計(jì)可能僅用于開發(fā)新產(chǎn)品的原型，而提供模塊化和簡(jiǎn)單擴(kuò)展程序的微前端架構(gòu)可能用于主流開發(fā)。
（言鼎科技）專做軟件開發(fā),微信小程序,網(wǎng)站開發(fā),軟件外包,手機(jī)APP開發(fā)，歡迎資訊！