我來教你如何使用 Vite 的 React 微前端
什么是微前端？
微前端是web應(yīng)用程序的一種架構(gòu)方法，程序的前端代碼被劃分為更小的、獨(dú)立開發(fā)的和可部署的單元，稱為微前端。
這種方法允許不同的團(tuán)隊(duì)在前端的不同部分工作，同時通過隔離層保持集成，提高了開發(fā)速度、可擴(kuò)展性和靈活性。這是一種管理復(fù)雜性和促進(jìn)前端開發(fā)自主性的方法。
模塊聯(lián)合
模塊聯(lián)合是一項(xiàng)關(guān)鍵技術(shù)，使JavaScript應(yīng)用程序能夠在共享依賴項(xiàng)的同時從另一個應(yīng)用程序動態(tài)加載代碼。
當(dāng)使用聯(lián)合模塊的應(yīng)用程序缺少所需的依賴項(xiàng)時，Webpack（底層技術(shù)）會自動從聯(lián)合構(gòu)建源獲取缺少的依賴項(xiàng)。從而允許跨多個微前端高效共享和使用公共庫。
為什么選擇Vite？
雖然模塊聯(lián)合最初是在Webpack中引入的，但JavaScript開發(fā)的格局也由此發(fā)生了改變。Vite通過提供閃電般的構(gòu)建時間而成為游戲規(guī)則的改變者。Vite和模塊聯(lián)合的結(jié)合使用可以快速有效地開發(fā)微前端，發(fā)揮巨大作用。
使用Vite + React創(chuàng)建微前端
創(chuàng)建微前端通常涉及兩個主要部分：
- 主機(jī)應(yīng)用程序：用戶與之交互的主要應(yīng)用程序。充當(dāng)微前端的容器。
- 遠(yuǎn)程應(yīng)用程序：即微前端本身，充當(dāng)主機(jī)應(yīng)用程序的構(gòu)建塊。
在了解了我們將要使用的技術(shù)之后，讓我們實(shí)際實(shí)現(xiàn)試試。
設(shè)置主機(jī)應(yīng)用
要使用Vite和React創(chuàng)建主機(jī)應(yīng)用程序，先運(yùn)行以下命令：
# Using npm 6.x
npm create vite@latest host-app --template react
# Using npm 7+, add an extra double-dash:
npm create vite@latest host-app -- --template react設(shè)置遠(yuǎn)程應(yīng)用
對遠(yuǎn)程應(yīng)用程序，執(zhí)行以下命令：
npm create vite@latest todo-components -- --template react這將創(chuàng)建兩個文件夾，host-app和todo-components。接下來安裝依賴項(xiàng)：
npm install在遠(yuǎn)程應(yīng)用中創(chuàng)建組件
在todo-components應(yīng)用中，創(chuàng)建以下組件：
// components/List.jsx
import React from "react";
const List = (props) => {
const { items } = props;
return (
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
);
};
export default List;// components/Input.jsx
import React from "react";
const Input = (props) => {
const { value, onChange, onSubmit } = props;
return (
<form
onSubmit={(e) => {
e.preventDefault();
onSubmit(e);
}}
>
<div className="flex-row">
<input
type="text"
value={value}
onChange={(e) => onChange(e.target.value)}
/>
<button type="submit">Add</button>
</div>
</form>
);
};
export default Input;組件準(zhǔn)備就緒后，對App.jsx文件進(jìn)行以下更改：
// App.jsx
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import "./App.css";
import Input from "./components/Input";
import List from "./components/List";
function App() {
const [count, setCount] = useState(0);
return (
<>
<Input value={count} onChange={setCount} onSubmit={console.log} />
<List items={["Learn React", "Learn Vite", "Make an awesome app"]} />
</>
);
}
export default App;預(yù)覽遠(yuǎn)程應(yīng)用
要預(yù)覽組件，請在todo-components應(yīng)用中運(yùn)行以下命令：
npm run dev此時輸出如下：
添加模塊聯(lián)合到遠(yuǎn)程應(yīng)用
現(xiàn)在，讓我們將模塊聯(lián)合添加到todo-components應(yīng)用。首先，安裝必要的依賴項(xiàng)：
npm install @originjs/vite-plugin-federation --save-dev接著，在vite.config.js文件中配置模塊聯(lián)合：
// vite.config.js in todo-components
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";
export default defineConfig({
plugins: [
react(),
federation({
name: "todo-components",
filename: "remoteEntry.js",
exposes: {
"./List": "./src/components/List.jsx",
"./Input": "./src/components/Input.jsx",
},
shared: ["react"],
}),
],
build: {
modulePreload: false,
target: "esnext",
minify: false,
cssCodeSplit: false,
},
});在此配置中：
- name：指定遠(yuǎn)程應(yīng)用的名稱。
- filename：設(shè)置模塊聯(lián)合生成文件的名稱。
- exposes：列出要從遠(yuǎn)程應(yīng)用公開的組件。
- shared：聲明共享依賴項(xiàng)，例如React，以優(yōu)化捆綁包大小。
現(xiàn)在，構(gòu)建遠(yuǎn)程應(yīng)用：
npm run build這會在todo-components應(yīng)用程序中生成dist文件夾，其中包含remoteEntry.js文件。
為遠(yuǎn)程應(yīng)用提供服務(wù)
在本地為遠(yuǎn)程應(yīng)用提供服務(wù)：
npm run preview這意味著在端口4173上為遠(yuǎn)程應(yīng)用提供服務(wù)。
添加模塊聯(lián)合到主機(jī)應(yīng)用
要在主機(jī)應(yīng)用中使用遠(yuǎn)程應(yīng)用組件，需要在主機(jī)應(yīng)用的vite.config.js文件中設(shè)置模塊聯(lián)合：
// vite.config.js in host-app
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import federation from "@originjs/vite-plugin-federation";
export default defineConfig({
plugins: [
react(),
federation({
name: "host-app",
remotes: {
todo_components: "http://localhost:4173/assets/remoteEntry.js",
},
shared: ["react"],
}),
],
build: {
modulePreload: false,
target: "esnext",
minify: false,
cssCodeSplit: false,
},
});在此配置中：
- name：指定主機(jī)應(yīng)用的名稱。
- remotes：列出主機(jī)應(yīng)用要使用的遠(yuǎn)程應(yīng)用。在本例中，我們有遠(yuǎn)程應(yīng)用、todo_components、以及提供remoteEntry.js文件的URL。
- shared：聲明共享的依賴項(xiàng)，例如React，以優(yōu)化捆綁包大小。
在主機(jī)應(yīng)用中使用遠(yuǎn)程組件
現(xiàn)在，我們可以在主機(jī)應(yīng)用的App.jsx中導(dǎo)入和使用遠(yuǎn)程應(yīng)用組件了：
// App.jsx in host-app
import { useState } from "react";
import List from "todo_components/List";
import Input from "todo_components/Input";
function App() {
const [newTodo, setNewTodo] = useState("");
const [todos, setTodos] = useState([]);
const onSubmit = () => {
setTodos((prev) => [...prev, newTodo]);
setNewTodo("");
};
return (
<>
<Input value={newTodo} onChange={setNewTodo} onSubmit={onSubmit} />
<List items={todos} />
</>
);
}
export default App;這里我們使用指定的遠(yuǎn)程名稱todo_components從遠(yuǎn)程應(yīng)用導(dǎo)入組件。
為主機(jī)應(yīng)用提供服務(wù)
若要在本地為主機(jī)應(yīng)用提供服務(wù)，運(yùn)行：
npm run dev現(xiàn)在，遠(yuǎn)程應(yīng)用程序中的組件就可以在主機(jī)應(yīng)用程序中無縫使用了，贊。
結(jié)論
在本文中，我們探討了微前端的概念，演示了如何使用Vite和React創(chuàng)建微前端架構(gòu)，以及如何通過模塊聯(lián)合進(jìn)行增強(qiáng)。
通過利用Vite的快速構(gòu)建和模塊聯(lián)合的動態(tài)代碼加載功能，我們可以以模塊化和可維護(hù)的方式高效地開發(fā)和擴(kuò)展web應(yīng)用程序。這種方法使多個團(tuán)隊(duì)能夠獨(dú)立處理應(yīng)用程序的不同部分，從而提高前端開發(fā)的靈活性和敏捷性。
