阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

小編精選 - 技術文章翻譯 · 12月13日

用 Vite 建立微前端架構範例

在整體前端架構中，單一程式碼庫處理整個使用者介面。雖然這可以簡化初始開發，但隨著應用程式的成長，它可能會變得複雜：

擴展：在單一儲存庫中工作的大型團隊可能會面臨合併衝突、較慢的 CI/CD 管道以及依賴關係的困難
獨立性：有時處理共享的事情會影響其他團隊
彈性：失敗可能會導致整個應用程式癱瘓

當您開始面臨這些問題時，微前端可以提供協助。與 Web 元件不同，Web 元件面臨有限的框架間通訊和生命週期管理挑戰，基於 Vite 的微前端允許開發人員使用不同的框架。它們提供了工具的靈活性、更好的狀態管理和更強大的整合選項。在現實生活中，經過多年發展的軟體中，能夠處理多個框架可以成為一種在需要時從舊框架遷移到新框架的順利方式。

在本文中，我們將使用Vite作為建構工具來建立一個微前端設置，並將Vue.js 、 Angular和React元件組合成統一的體驗。例子？模組化新聞門戶，其中每個框架處理特定部分。

模組化新聞門戶

這個模組化新聞門戶將具有：

用 Vue.js 製作的標題：有簡單的導覽列
用 React 製作的趨勢：顯示最新文章
使用 Angular 製作的亮點：顯示最受歡迎的文章

在現實世界的範例中，跨多種技術分離新聞管理並不理想，但它很好地服務於我們的範例。

建造外殼

在微前端架構中， Shell充當微前端的容器。它有3個主要特點：

協調：Shell 負責將不同的微前端載入並渲染到應用程式的指定區域
編排：它處理全局問題，例如導航、共享樣式、共享狀態、資料......
入口點：這是使用者在瀏覽器中首先載入的內容。如果微前端之一無法加載，它還可以提供後備措施。

我們設定中的 Shell 將使用 Vite 並動態載入 ESM 模組：

host/
├── index.html  # Main entry point
├── main.js     # Loads the micro-frontends
├── vite.config.js
├── package.lock.json
├── package.json
apps/            # Contains individual micro-frontends
├── header/
    ├── src/
        ├── components/
            ├── Header.vue
        ├── main.js
    ├── vite.config.js
    ├── package.lock.json
    ├── package.json
├── trending/
    ├── src/
        ├── components
            ├── Trending.jsx
        ├── main.jsx
    ├── eslint.config.js
    ├── package.lock.json
    ├── vite.config.js
├── highlights/

讓我們來建構它吧！

我們首先為我們的主機和微前端初始化一個 Vite 工作區。

mkdir news-portal && cd news-portal  
npm init vite@latest host --template vanilla

讓我們組織專案來分離每個微前端：

mkdir -p apps/header apps/trending apps/highlights

現在，讓我們使用 DOM 中的元件架構來建立簡單的 index.html ：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>News Portal</title>
</head>
<body>
  <div id="header"></div>
  <div id="trending"></div>
  <div id="highlights"></div>
  <script type="module" src="./src/main.js"></script>
</body>
</html>

現在，讓我們建立 main.js 文件，該文件負責安裝微前端（請注意，在建置微前端之前導入不會起作用）：

// main.js
import { mount as mountHeader } from '../apps/header/dist/header.js';
import { mount as mountTrending } from '../apps/trending/dist/trending.js';
import { mount as mountHighlights } from '../apps/highlights/dist/highlights.js';

mountHeader(document.querySelector('#header'));
mountTrending(document.querySelector('#trending'));
mountHighlights(document.querySelector('#highlights'));

然後，我們在 vite.config.js 中建立 Vite 配置以啟用 Vite 伺服器：

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    port: 3000,
    open: true,
  },
});

啟動 Shell 準備服務：

cd host
npm install
npm run dev

現在我們已經成功建立了 Shell，它已準備好為我們未來的微前端提供服務。現在，讓我們來建立它們！

使用 Vue 3 建立標題

讓我們在應用程式內建立標頭資料夾並導航到其中：

cd apps
npm init vite@latest header --template vue  
cd header  
npm install

在src/components/Header.vue內，建立一個帶有導航的簡單標頭，例如搜尋列：

<template>
  <header class="header">
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">World</a></li>
        <li><a href="#">Tech</a></li>
        <li><a href="#">Sports</a></li>
      </ul>
    </nav>
    <input type="text" placeholder="Search news..." />
  </header>
</template>

<script>
export default {
  name: 'Header',
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  background: #333;
  color: white;
}
nav ul {
  display: flex;
  list-style: none;
}
nav ul li {
  margin-right: 1em;
}
input {
  padding: 0.5em;
}
</style>

我們需要一個src/main.js來安裝元件：

import { createApp } from 'vue';
import Header from './components/Header.vue';

export function mount(el) {
  createApp(Header).mount(el);
}

配置 vite.config.js 將此應用程式公開為庫：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vite.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: './src/main.js',
      name: 'Header',
      fileName: 'header',
    },
  },
})

最後，建立微前端以產生 dist 資料夾：

cd apps/header
npm run build

您現在應該能夠在Shell中看到您的Header 。發生這種情況是因為我們告訴 Shell 提供標頭的 dist 資料夾，並使用npm build命令來產生它。

使用 React 18 建立趨勢部分

讓我們在應用程式中建立Trending資料夾並導航到其中：

cd apps
npm init vite@latest trending --template react  
cd trending
npm install

在src/components/Trending.jsx中加入 Trending 元件

import React from 'react';

const Trending = () => {
  const articles = [
    { id: 1, title: "React 18 Released", summary: "Learn what's new in React 18." },
    { id: 2, title: "AI Revolution", summary: "How AI is transforming industries." },
  ];

  return (
    <section className="trending">
      <h2>Trending News</h2>
      <ul>
        {articles.map((article) => (
          <li key={article.id}>
            <h3>{article.title}</h3>
            <p>{article.summary}</p>
          </li>
        ))}
      </ul>
    </section>
  );
};

export default Trending;

我們需要一個src/main.jsx來安裝元件：

import React from 'react';
import ReactDOM from 'react-dom/client'; 
import Trending from './components/Trending';

export function mount(el) {
  const root = ReactDOM.createRoot(el); 
  root.render(<Trending />); 
}

配置vite.config.js ：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    lib: {
      entry: './src/main.jsx',
      name: 'Trending',
      fileName: 'trending',
    },
  },
});

建置生成 dist 資料夾：

npm run build

我們到了！現在，我們的第二個微前端在 Shell 內的標頭下提供服務。

使用 Angular 19 建立亮點

編輯：在沒有模組聯合、自訂元素或小部件的情況下，我還無法讓 Vite 與 Angular 19 一起使用。我目前正在嘗試找到這 3 種方法之間的最佳方法，以便在稍後編輯這篇文章時向您建議最有效的方法。

常見陷阱

連接埠衝突

在 vite.config.js 或 angular.json 中為每個微前端分配唯一的連接埠以避免衝突

共享庫

對公共庫使用共享 CDN 以減少重複和套件大小
確保版本相容性以避免執行時錯誤

CORS問題

在本機開發過程中，由於瀏覽器安全策略，託管在不同連接埠的微前端可能會面臨 CORS 問題

對於生產環境，請配置您的 Web 伺服器以允許跨網域請求：

add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Origin, Content-Type, Accept';

透過在同一域或子域結構（例如，https://news-portal.com/header、https://news-portal.com/trending）下部署所有微前端和 Shell，最大限度地減少 CORS 要求。

Github連結

Github 到程式碼：程式碼儲存庫

結論

恭喜，您已經使用 Vite 設定了您的第一個 MicroFrontend 架構。對於過去已經使用過 Web 元件的人來說，您可能會發現它確實更簡單且有用。我希望當您需要解耦軟體的多個前端部分的開發時，它會對您建立第一個 MFE 專案有很好的幫助。

原文出處：https://dev.to/mairouche/setup-a-micro-frontend-architecture-in-15min-with-vite-4pbg

0個讚 0留言 45瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。

阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

立即解鎖你的轉職秘笈