適用於可擴充 Web 應用程式的 avaScript 微前端模式-js教程-PHP中文網

avaScript Microfrontend Patterns for Scalable Web Applications

作為一位多產的作家，我鼓勵您在亞馬遜上探索我的書。請記得關注我在 Medium 上的工作以獲得持續的支持。謝謝你！您的參與非常寶貴！

微前端架構作為建立大規模、可維護的 Web 應用程式的解決方案獲得了巨大的關注。在參與過許多廣泛的專案之後，我直接體驗到了將整體前端分解為更小、更易於管理的單元的優勢。本文詳細介紹了八種 JavaScript 微前端架構模式，以增強應用程式的靈活性和可擴充性。

Monorepo 結構

微前端實作中的一個關鍵的初始決策涉及程式碼庫組織。事實證明，在單一儲存庫中容納多個前端應用程式的 monorepo 結構非常有益。

Monorepos 簡化了微前端之間的程式碼共享並簡化了版本控制。它們促進一致性並簡化依賴管理。

單一儲存庫結構範例：

<code>my-microfrontend-app/
├── packages/
│   ├── header/
│   ├── footer/
│   ├── product-list/
│   └── shopping-cart/
├── shared/
│   ├── components/
│   └── utils/
├── package.json
└── lerna.json</code>

登入後複製

每個微前端作為單獨的包存在於 packages 目錄中。共享資源位於 shared 目錄中。

模組聯盟

Webpack 5 的模組聯合在應用程式之間動態載入和共用程式碼 - 非常適合微前端，支援執行時間元件載入。

基本的模組聯合配置：

<code>// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...other webpack config
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};</code>

登入後複製

這會公開 Button 中的 app1 組件以供其他微前端使用。

自訂元素

Web 元件，尤其是自訂元素，建立可重複使用的、與框架無關的元件。這在微前端架構中至關重要，因為團隊可能會使用不同的框架。

自訂元素範例：

<code>class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `

        /* Styles for the custom element */
      <div>
        <h1>My Custom Element</h1>
        <p>This is a custom element used in a microfrontend architecture.</p>
      </div>
    `;
  }
}

customElements.define('my-custom-element', MyCustomElement);</code>

登入後複製

該元素可以跨微前端運行，無論其底層框架如何。

單一 SPA 框架

Single-SPA 是一個專用的微前端框架。它有助於從獨立開發和部署的微前端建立應用程式。

基本的單 SPA 設定：

<code>import { registerApplication, start } from 'single-spa';

registerApplication({
  name: 'app1',
  app: () => import('./app1/main.js'),
  activeWhen: '/app1',
});

registerApplication({
  name: 'app2',
  app: () => import('./app2/main.js'),
  activeWhen: '/app2',
});

start();</code>

登入後複製

這會註冊app1和app2，並根據路線啟動它們。

事件驅動的溝通

鬆散耦合的微前端之間的有效通訊至關重要。使用發布/訂閱或自訂事件的事件驅動方法非常有效。

自訂事件範例：

<code>// In one microfrontend
const event = new CustomEvent('itemAdded', { detail: { itemId: 123 } });
window.dispatchEvent(event);

// In another microfrontend
window.addEventListener('itemAdded', (event) => {
  console.log('Item added:', event.detail.itemId);
});</code>

登入後複製

這允許在不暴露內部細節的情況下進行通訊。

共享狀態管理

雖然事件驅動的通訊足以滿足許多情況，但集中式狀態管理（Redux、MobX）可確保微前端之間的一致性。

一個基本的 Redux 範例：

<code>my-microfrontend-app/
├── packages/
│   ├── header/
│   ├── footer/
│   ├── product-list/
│   └── shopping-cart/
├── shared/
│   ├── components/
│   └── utils/
├── package.json
└── lerna.json</code>

登入後複製

共享狀態確保資料存取的一致性。

資源載入策略

性能至關重要。智慧資源載入（如延遲載入）至關重要。一個 React 範例：

<code>// webpack.config.js
const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');

module.exports = {
  // ...other webpack config
  plugins: [
    new ModuleFederationPlugin({
      name: 'app1',
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Button',
      },
      shared: ['react', 'react-dom'],
    }),
  ],
};</code>

登入後複製

延遲載入會減少初始套件的大小。

標準化建置流程

跨微前端的一致建置流程對於簡化部署和減少錯誤至關重要。 package.json 例：

<code>class MyCustomElement extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `

        /* Styles for the custom element */
      <div>
        <h1>My Custom Element</h1>
        <p>This is a custom element used in a microfrontend architecture.</p>
      </div>
    `;
  }
}

customElements.define('my-custom-element', MyCustomElement);</code>

登入後複製

一致的建置工具確保一致性。

這些模式增強了微前端架構。但是，請記住，每個專案都是獨一無二的，選擇合適的模式是關鍵。仔細規劃對於成功實施至關重要。