适用于可扩展 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>

登录后复制

一致的构建工具确保一致性。

这些模式增强了微前端架构。但是，请记住，每个项目都是独一无二的，选择合适的模式是关键。仔细规划对于成功实施至关重要。