微前端是一个应用程序，它是一个更大的架构的一部分，而不是一个独立的应用程序。基本上，这是一个由较小的应用程序（或微前端）组成的复合应用程序，每个微前端可以由独立的、单独的团队拥有、开发和维护。
这种方法通常用于复杂的应用程序，如宜家和Upwork的网站以及Spotify的桌面应用程序，这些应用程序有增长过大的趋势，变得过于混乱和难以维护。
在本教程中，我们将创建两个不同的基本Svelte应用程序，并使用Podium将各个片段编译成一个应用程序，以学习微前端的知识。
对于本教程，请确保你对Svelte和Node.js有基本了解。
创建Svelte应用程序
要开始创建Svelte应用程序，我们必须首先创建一个名为svelte-app-one 的新文件夹，并在其中运行以下命令来克隆Svelte的GitHub模板。
npx degit sveltejs/template
要创建第二个应用程序，在另一个名为svelte-app-two 的文件夹中重复同样的过程。
接下来，让我们对这些应用程序做一些小改动。由于这两个应用将被合并，而且每个应用都有自己的body 元素，我们必须通过给它们添加唯一的ID来区分这两个主体元素。
对于第一个应用程序，导航到public/index.html ，在body标签内添加一个div，并给它一个唯一的ID。
<body>
<div id="svelte-app-one"></div>
</body>
接下来，导航到该文件夹的src/main.js 文件，并确保querySelector 函数以你刚刚添加的ID为目标。
import App from './App.svelte';
const app = new App({
target: document.querySelector( '#svelte-app-one' )
});
export default app;
对public/index.html 中的第二个应用程序重复同样的过程。
<body>
<div id="svelte-app-two"></div>
</body>
然后再在src/main.js 。
import App from './App.svelte';
const app = new App({
target: document.querySelector("#svelte-app-two")
});
export default app;
在Svelte应用程序中显示一个消息
在这两个应用程序中，我们将显示非常简单的消息，并继续将它们与Podium结合在一起。对于应用程序一，导航到App.svelte ，添加一个带有简单信息的标题标签，并给它一些样式。
<script>
</script>
<main>
<h1>This is the first app!</h1>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 300px;
margin: 0 auto;
padding: 20px 5px;
}
h1 {
color: #000;
font-size: 5em;
font-weight: 150;
}
</style>
接下来，为第二个应用程序做同样的事情。
<script>
</script>
<main>
<h1>This is the second app!</h1>
</main>
<style>
main {
text-align: center;
padding: 1em;
max-width: 300px;
margin: 0 auto;
padding: 20px 5px;
background-color: #000;
color:#fff;
}
h1 {
color: #fff;
font-size: 5em;
font-weight: 150;
}
</style>
为Podium准备Svelte应用程序
为了让Podium将这两个应用程序结合在一起，它需要知道应用程序的HTML、CSS和JavaScript文件的位置。这可以在一个manifest.json 文件和一个叫做podlet的工具的帮助下实现，以生成这个manifest.json 文件。
我们可以用下面的命令将podlet的包安装在svelte-app-one 文件夹中。
npm install express @podium/podlet
接下来，我们将使用podlet工具使两个应用程序的CSS、JavaScript和HTML文件对Podium可用。在svelte-app-one 的根文件夹中，创建一个名为podlet.js 的文件并添加以下代码。
const express = require("express");
const Podlet = require("@podium/podlet");
const fs = require("fs");
const app = express();
const podlet = new Podlet({
name: "svelte-app-one",
version: "0.1.0",
pathname: "/",
manifest: "/manifest.json",
development: true,
});
podlet.css({ value: "http://localhost:3100/css/global.css" });
app.use("/css", express.static("public/css/"));
let buildfiles = fs.readdirSync('public/build');
buildfiles.forEach((element, index) => {
if(element.indexOf('.css') !== -1 && element.indexOf('.css.map') === -1){
podlet.css({ value: "http://localhost:3100/build/" + element });
}else if(element.indexOf('.js') !== -1 && element.indexOf('.js.map') === -1) {
podlet.js({ value: "http://localhost:3100/build/" + element, defer: true });
}
});
app.use("/build", express.static("public/build/"));
app.use(podlet.middleware());
app.get(podlet.content(), (req, res) => {
res.status(200).podiumSend('<div id="svelte-app-one"></div>');
});
app.get(podlet.manifest(), (req, res) => {
res.status(200).send(podlet);
});
app.listen(3100);
在这里，我们首先导入podlet和文件系统包，并创建一个podlet实例，给它一个名称、版本和服务的路径。我们还指定了它将创建的清单文件。
接下来，我们将应用程序中的 JavaScript 和 CSS 文件添加到 podlet 中（这些文件在public/build 文件夹中），并使用readdirSync 函数来访问public/build 文件夹，使用foreach 语句来循环浏览。
使用if 语句，我们指定每一个具有.css 扩展名的文件应该使用podlet.css 函数添加到podlet中。
然后，使用else if 语句，我们指定每个具有.js 扩展名的文件应使用podlet.js 函数添加到 podlet 中。
对于生产来说，本地主机的URL应该被改为文件托管的URL。
接下来，我们可以使用express.static 来创建这些文件的静态链接，以使这些文件公开可用。为了使我们的应用程序中的路由工作，并使podlet正常运行，我们必须使用middleware 函数来装载中间件。
在指定了我们的CSS和JavaScript文件后，我们可以使用podiumSend 函数将podlet指向我们的HTML--我们先前在body标签内添加的div。
现在我们的podlet知道了我们的CSS、JavaScript和HTML文件的位置，我们可以使用manifest 函数为Podium创建一个manifest.json 文件，并指定我们的应用程序应该被提供的端口。
最后，我们将按照完全相同的过程为我们的第二个Svelte应用程序创建一个podlet。
const express = require("express");
const Podlet = require("@podium/podlet");
const fs = require("fs");
const app = express();
const podlet = new Podlet({
name: "svelte-app-two",
version: "0.1.0",
pathname: "/",
manifest: "/manifest.json",
development: true,
});
podlet.css({ value: "http://localhost:3101/css/global.css" });
app.use("/css", express.static("public/css/"));
let buildfiles = fs.readdirSync('public/build');
buildfiles.forEach((element, index) => {
if(element.indexOf('.css') !== -1 && element.indexOf('.css.map') === -1){
podlet.css({ value: "http://localhost:3101/build/" + element });
}else if(element.indexOf('.js') !== -1 && element.indexOf('.js.map') === -1) {
podlet.js({ value: "http://localhost:3101/build/" + element, defer: true });
}
});
app.use("/build", express.static("public/build/"));
app.use(podlet.middleware());
app.get(podlet.content(), (req, res) => {
res.status(200).podiumSend('<div id="svelte-app-two"></div>');
});
app.get(podlet.manifest(), (req, res) => {
res.status(200).send(podlet);
});
app.listen(3101);
使用Podium合并两个Svelte应用程序
要开始结合两个Svelte应用程序，首先让我们创建一个名为podium-merger 的文件夹，并在其中运行以下命令来创建一个package.json 文件。
npm init
接下来，导航到该文件夹，并创建一个名为layout.js 的文件。在这个文件中，我们将评估之前创建的两个podlet，获得这些podlet中指定的HTML、CSS和JavaScript文件，并将它们合并成一个应用程序。
在Podium中，我们可以按照我们希望的方式安排我们正在组合的应用程序。这种安排被称为布局。
const express = require("express");
const app = express();
const Layout = require("@podium/layout");
const layout = new Layout({
name: "podiumLayout",
pathname: "/",
});
const svelteAppOne = layout.client.register({
name: "svelte-app-one",
uri: "http://localhost:3100/manifest.json",
});
const svelteAppTwo = layout.client.register({
name: "svelte-app-two",
uri: "http://localhost:3101/manifest.json",
});
app.use(layout.middleware());
app.get("/", async (req, res) => {
const podiumLayout = res.locals.podium;
const data = await Promise.all([
svelteAppOne.fetch(podiumLayout),
svelteAppTwo.fetch(podiumLayout),
]);
podiumLayout.podlets = data;
podiumLayout.view.title = "Composite App";
res.podiumSend(`<div>
${data[0]}
${data[1]}
</div>
`);
});
app.listen(3000);
让我们来分解一下代码：首先，我们导入layout 包，并创建一个实例，给它一个名字和一个要提供的路径。
接下来，我们使用client.register 函数将我们的Svelte应用程序注册到布局上。请注意我们是如何将布局指向manifest.json 文件的。这是它找到CSS、HTML和JavaScript文件的方式，它将结合这些文件。
然后，我们从我们的布局包中加载middleware 函数，以确保我们的应用程序中的所有路由正常运行。
接下来，我们指定当我们的应用程序的根URL被访问时，Podium布局应该被返回。然后，我们使用fetch 函数从两个应用程序中获取数据，并将数据保存在一个名为data 的常量中，并通过podiumLayout.podlets = data; 将数据绑定到我们的布局中。
通过使用podiumSend 函数，我们在div标签中指定应用程序的显示安排。请注意，data[0] 是我们第一个应用程序的数据，data[1] 是我们第二个应用程序的数据。
最后，我们指定为我们的应用程序提供服务的端口。
总结
这就是我们最终的应用程序。
微前端可以帮助你在前端实现微服务对后端所做的事情，也就是让你有机会在大型组织中简化开发过程。
有了微前端，你可以让小团队独立开发特定的功能，从而消除进展的阻力和瓶颈。
The postBuilding Svelte micro frontends with Podiumappeared first onLogRocket Blog.
