我來教你如何使用 Vite 的 React 微前端
什么是微前端？
微前端是web應用程序的一種架構方法，程序的前端代碼被劃分為更小的、獨立開發的和可部署的單元，稱為微前端。
這種方法允許不同的團隊在前端的不同部分工作，同時通過隔離層保持集成，提高了開發速度、可擴展性和靈活性。這是一種管理復雜性和促進前端開發自主性的方法。
模塊聯合
模塊聯合是一項關鍵技術，使JavaScript應用程序能夠在共享依賴項的同時從另一個應用程序動態加載代碼。
當使用聯合模塊的應用程序缺少所需的依賴項時，Webpack（底層技術）會自動從聯合構建源獲取缺少的依賴項。從而允許跨多個微前端高效共享和使用公共庫。
為什么選擇Vite？
雖然模塊聯合最初是在Webpack中引入的，但JavaScript開發的格局也由此發生了改變。Vite通過提供閃電般的構建時間而成為游戲規則的改變者。Vite和模塊聯合的結合使用可以快速有效地開發微前端，發揮巨大作用。
使用Vite + React創建微前端
創建微前端通常涉及兩個主要部分：
- 主機應用程序：用戶與之交互的主要應用程序。充當微前端的容器。
- 遠程應用程序：即微前端本身，充當主機應用程序的構建塊。
在了解了我們將要使用的技術之后，讓我們實際實現試試。
設置主機應用
要使用Vite和React創建主機應用程序，先運行以下命令：
# 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設置遠程應用
對遠程應用程序，執行以下命令：
npm create vite@latest todo-components -- --template react這將創建兩個文件夾，host-app和todo-components。接下來安裝依賴項：
npm install在遠程應用中創建組件
在todo-components應用中，創建以下組件：
// 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;組件準備就緒后，對App.jsx文件進行以下更改：
// 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;預覽遠程應用
要預覽組件，請在todo-components應用中運行以下命令：
npm run dev此時輸出如下：
添加模塊聯合到遠程應用
現在，讓我們將模塊聯合添加到todo-components應用。首先，安裝必要的依賴項：
npm install @originjs/vite-plugin-federation --save-dev接著，在vite.config.js文件中配置模塊聯合：
// 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：指定遠程應用的名稱。
- filename：設置模塊聯合生成文件的名稱。
- exposes：列出要從遠程應用公開的組件。
- shared：聲明共享依賴項，例如React，以優化捆綁包大小。
現在，構建遠程應用：
npm run build這會在todo-components應用程序中生成dist文件夾，其中包含remoteEntry.js文件。
為遠程應用提供服務
在本地為遠程應用提供服務：
npm run preview這意味著在端口4173上為遠程應用提供服務。
添加模塊聯合到主機應用
要在主機應用中使用遠程應用組件，需要在主機應用的vite.config.js文件中設置模塊聯合：
// 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：指定主機應用的名稱。
- remotes：列出主機應用要使用的遠程應用。在本例中，我們有遠程應用、todo_components、以及提供remoteEntry.js文件的URL。
- shared：聲明共享的依賴項，例如React，以優化捆綁包大小。
在主機應用中使用遠程組件
現在，我們可以在主機應用的App.jsx中導入和使用遠程應用組件了：
// 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;這里我們使用指定的遠程名稱todo_components從遠程應用導入組件。
為主機應用提供服務
若要在本地為主機應用提供服務，運行：
npm run dev現在，遠程應用程序中的組件就可以在主機應用程序中無縫使用了，贊。
結論
在本文中，我們探討了微前端的概念，演示了如何使用Vite和React創建微前端架構，以及如何通過模塊聯合進行增強。
通過利用Vite的快速構建和模塊聯合的動態代碼加載功能，我們可以以模塊化和可維護的方式高效地開發和擴展web應用程序。這種方法使多個團隊能夠獨立處理應用程序的不同部分，從而提高前端開發的靈活性和敏捷性。
