关于 React 微前端的一切
几十年来一直是软件开发规范的单体架构正在被微服务取代，作为一种替代策略。最初，单片设计的成功由来已久。因此，一些软件供应商和行业领导者坚信它的好处。但随着时代的变化，新的技术进步似乎比每个人似乎都习惯的更有优势。
React 微前端架构并不是一个新概念；相反，它是早期架构模式的进步。社交媒体、云计算和物联网的颠覆性创新趋势正在严重影响微服务架构平台快速渗透市场。
由于转向持续部署。微服务以React 微前端的形式通过以下方式帮助企业：
构建的可扩展性
快速部署
技术独立
无绝缘故障
高效升级迁移
高可部署性和自动化
减少安全威胁和可靠性
开发时间缩短且成本更低
吸引工程师
使用 React 构建微前端 [教程]
让我们向您展示构建 React 微前端的教程指南。在这里，我们将构建两个应用程序，即主机和远程；其中主要应用程序是主机，另一个将是我们插入其中的子应用程序。
主机应用程序将是我们的“主”应用程序，而远程应用程序将是插入其中的子应用程序。
首先，我们将使用 create-react-app 创建一个基本的 React 应用程序。
1. 在你的根目录
npx create-react-app 主机应用程序
npx create-react-app 远程应用程序
这将为您创建两个应用程序：
1. 主机应用程序/
2. 远程应用程序/
2.添加依赖
在每个 host-app/ 和 remote-app/ 运行中：
npm install –save-dev webpack webpack-cli html-webpack-plugin webpack-dev-server babel-loader css-loader
这将安装 webpack 配置所需的 webpack 和依赖项。
注意：-Webpack Module Federation 在 webpack 5 及以上版本中可用。
添加依赖项后，我们可以托管我们的应用程序。
您是否希望为您的用户创建一个 React 微前端应用程序，以便他们快速找到他们的解决方案并扩展您的业务？
从 Bacancy聘请 Reactjs 开发人员，因为我们是前端巨大可能性的早期采用者。我们经验丰富的 React 开发人员在行业范围内的大小领域拥有多年的经验。
3.托管应用程序
让我们从我们的 webpack 配置开始
在 host-app/ & remote-app/ 的根目录下创建一个新的 webpack.config.js 文件：
//host-app/webpack.config.jsconst HtmlWebpackPlugin = require("html-webpack-plugin");
模块.exports = {
条目：“./src/index”，
模式：“发展”，
开发服务器：{
端口：3000，
},
模块： {
规则：[
{
测试：/\.(js|jsx)?$/,
排除：/node_modules/，
使用： [
{
装载机：“巴别塔装载机”，
选项： {
预设：[“@babel/preset-env”，“@babel/preset-react”]，
},
},
],
},
{
测试：/\.css$/i,
使用：["style-loader", "css-loader"],
},
],
},
插件：[
新的 HtmlWebpackPlugin({
模板：“./public/index.html”，
网站图标：“./public/favicon.ico”，
清单：“./public/manifest.json”，
}),
],
解决： {
扩展名：[".js", ".jsx"],
},
目标：“网络”，};
// 远程应用程序/webpack.config.jsconst HtmlWebpackPlugin = require("html-webpack-plugin");const path = require("路径");
模块.exports = {
条目：“./src/index”，
模式：“发展”，
开发服务器：{
静止的： {
目录：path.join(__dirname, "public"),
},
端口：4000，
},
模块： {
规则：[
{
测试：/\.(js|jsx)?$/,
排除：/node_modules/，
使用： [
{
装载机：“巴别塔装载机”，
选项： {
预设：[“@babel/preset-env”，“@babel/preset-react”]，
},
},
],
},
{
测试：/\.css$/i,
使用：["style-loader", "css-loader"],
},
{
测试：/\.(gif|png|jpe?g|svg)$/,
使用： [
{
装载机：“文件装载机”，
选项： {
名称：“[名称]。[分机]”，
输出路径：“资产/图像/”，
},
},
],
},
],
},
插件：[
新的 HtmlWebpackPlugin({
模板：“./public/index.html”，
网站图标：“./public/favicon.ico”，
清单：“./public/manifest.json”，
}),
],
解决： {
扩展名：[".js", ".jsx"],
},
目标：“网络”，};
这个基本的 webpack 示例是使用 babel-loader 转换我们的 js 和 jsx 代码并注入到 HTML 模板中。
更改 package.json 中的启动脚本以利用我们的 webpack 配置：-
“脚本”：{
“开始”：“网络包服务”
}
index.js（两个应用程序相同）
首先，我们需要 index.js 作为我们应用程序的入口。我们正在导入的另一个文件是 bootstrap.js，它呈现 React 应用程序。
我们需要这个额外的间接层，因为它会让 Webpack 有机会加载渲染远程应用程序所需的所有导入。
否则，您将看到如下错误：
共享模块不可用于急切消费
//主机应用程序/src/index.js//远程应用程序/src/index.js导入（“./bootstrap”）;
// 注意：使用 import() 语句动态导入引导程序文件很重要，否则您将看到相同的错误。
bootstrap.js（两个应用程序相同）
接下来，我们为呈现我们的 React 应用程序的两个存储库定义 bootstrap.js 文件。
从“反应”导入反应；从“react-dom/client”导入 ReactDOM；从“./App”导入应用程序；
const root = ReactDOM.createRoot(document.getElementById("root"));root.render(
< 反应。严格模式 >
< 应用 / >
</React.StrictMode>);
App.js（在主机应用程序中）
现在我们可以在应用程序的主要逻辑发生的地方编写我们的 App.js 文件。在这里，我们将从稍后定义的远程加载两个组件。
import(“Remote/App”) 将动态获取 Remote 应用程序的 App.js React 组件。
我们需要使用延迟加载器和ErrorBoundary组件来为用户创造流畅的体验，以防抓取花费很长时间或在我们的主机应用程序中引入错误。
// 主机应用程序/src/App.js从“反应”导入反应；从“./ErrorBoundary”导入 ErrorBoundary；const RemoteApp = React.lazy(() => import("Remote/App"));const RemoteButton = React.lazy(() => import("Remote/Button"));
const RemoteWrapper = ({ children }) => (
<分区
样式={{
border: "1px 纯红色",
背景：“白色”，
}}
>
<ErrorBoundary>{子级}</ErrorBoundary>
</div>);
导出常量 App = () => (
<div style={{ 背景：“rgba(43, 192, 219, 0.3)” }}>
<h1>这是主持人！</h1>
<h2>远程应用：</h2>
<RemoteWrapper>
<远程应用 />
</RemoteWrapper>
<h2>远程按钮：</h2>
<RemoteWrapper>
<远程按钮/>
</RemoteWrapper>
<br />
<a href="http://localhost:4000">远程应用链接</a>
</div>);导出默认应用程序；
您可以从此存储库添加 ErrorBoundary 组件。
添加模块联合（在主机应用程序中）
我们还没有准备好运行该应用程序。接下来，我们需要添加 Module Federation 来告诉我们的主机从哪里获取 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({
名称：“主机”，
遥控器：{
远程：` Remote@http ://localhost:4000/moduleEntry.js`，
},
共享：{
...依赖关系，
反应：{
单例：是的，
requiredVersion: dependencies["反应"],
},
“反应-dom”：{
单例：是的，
requiredVersion: dependencies["react-dom"],
},
},
}),
],};
需要注意的重要事项：
名称：-用于区分模块。
Remotes：-这是我们定义要在此应用程序中使用的联合模块的地方。您会注意到我们将 Remote 指定为内部名称，以便我们可以使用 import(“Remote/
共享：-这是我们在模块之间共享依赖关系的方式。这对 React 来说非常重要，因为它有一个全局状态，这意味着你应该在任何给定的应用程序中只运行一个 React 和 ReactDOM 实例。为了在我们的架构中实现这一点，我们告诉 webpack 将 React 和 ReactDOM 视为单例，因此从任何模块加载的第一个版本将用于整个应用程序。只要满足我们定义的 requiredVersion 即可。我们还从 package.json 导入所有其他依赖项并将它们包含在这里，因此我们可以最大限度地减少模块之间重复依赖项的数量。
现在，如果我们在主机应用程序中运行 npm start，我们将能够在屏幕上看到输出。
这意味着我们的主机应用程序已配置，但我们的远程应用程序尚未公开任何内容。所以我们也需要配置它。
对于远程应用
让我们从 webpack 配置文件开始。由于我们配置了它的host-app，我们对Module Federation有了一些了解：
将以下代码添加到插件中。
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");const { dependencies } = require("./package.json");
新的 ModuleFederationPlugin({
名称：“远程”，
文件名：“moduleEntry.js”，
暴露：{
"./App": "./src/App",
"./Button": "./src/Button",
},
共享：{
...依赖关系，
反应：{
单例：是的，
requiredVersion: dependencies["反应"],
},
“反应-dom”：{
单例：是的，
requiredVersion: dependencies["react-dom"],
},
},
}),
我们可以从上面的代码中注意到的重要事项是：
我们的 webpack 开发服务器运行在 localhost:4000
远程模块的名称是 Remote
文件名为 moduleEntry.js
结合这些将允许我们的主机应用程序在Remote@http ://localhost:4000/moduleEntry.js找到远程应用程序的代码
exposes 是我们定义要在 moduleEntry.js 文件中共享的代码的地方。这里我们暴露了两个文件：<App/>和<Button/>。
现在我们可以设置这些组件和我们的 Remote 应用程序，以便它可以独立运行。
从“反应”导入反应；
导出常量 App = () => {
返回 <div>来自远程应用程序的问候</div>；};导出默认应用程序；
我们还想公开一个<按钮/>组件.
从“反应”导入反应；
export const Button = () => <button>你好！</button>;
导出默认按钮；
现在我们已经配置了 Remote 应用程序，如果您运行 npm start 我们可以看到一个空白页面，上面写着“Hello from the other side”。
现在您可以将两个存储库放在一个文件夹中，并通过一个命令启动它们：-
微前端演示/主机应用程序微前端演示/远程应用程序运行 npm init -y
将创建一个 package.json 文件。现在在 package.json 中添加以下更改：-
“工作区”：{
“包裹”：[
“主持人”，
“偏僻的”
]
},
“脚本”：{“开始”：“npm run start:host & npm run start:remote”,
"start:host": "cd ./host-app && npm start",
“开始：远程”：“cd ./remote-app && npm start”，
"start:all": "yarn workspaces run start",
“清理”：“纱线工作区运行清理”
},
这将在一个命令中运行两个 repos。你可以看到输出。
结论
开发者不建议使用 create-react-app 命令创建 React 微前端 App。但是，我们希望本教程对您有所帮助。
通常，一些关键元素对微前端架构的流行和发展势头做出了重大贡献。大部分基于产品的业务使用微前端架构来加速和降低开发成本。在未来几年，整体设计可能仅用于开发新产品的原型，而提供模块化和简单扩展程序的微前端架构可能用于主流开发。
（言鼎科技）专做软件开发,微信小程序,网站开发,软件外包,手机APP开发，欢迎资讯！
还没有评论，来说两句吧...