Iniciando com 微前端（模块联合）

构建前端应用程序的存在形式多种多样。它存在于多个框架中，可以帮助您构建分布的环境组件和不同形式的通用依赖项，或在没有浏览器的情况下构建组件的环境。

您可以使用“模块联盟”，这是 Zack Jackson 的设计模型和Webpack核心开发人员的建议。与模块联合不同，存在不同的实现方式，模块捆绑器与 Rollup 不同。您可以使用 Webpack 中的高级 api。使用 Webpack 插件 ModuleFederation 的脚本编写示例。

一个简单的项目启动方式是支持模块联盟，并支持create-mf-appJack Herrington 的开发（youtube 上有一些微前端技术，可以使用https://www.youtube.com/c/jackherrington）。

使用 cli 执行命令或命令

npx create-mf-app

Siga 作为 cli 的指令。可以使用应用程序、框架、本地主机端口等信息。

? Pick the name of your app: host
? Project Type: Application
? Port number: 8080
? Framework: vanilla
? Language: javascript
? CSS: CSS
Your 'host' project is ready to go.

Next steps:

▶️ cd host
▶️ npm install
▶️ npm start

Após executar esses passos podemos avaliar alguns arquivos importantes。

您可以webpack.config.js在微前端进行配置。这是一个插件属性。您可以通过以下方式开发插件配置：chamadoModuleFederationPlugin和 ele deve ser parecido com：

//...

plugins: [
  //...

  new ModuleFederationPlugin({
    name: "host",
    filename: "remoteEntry.js",
    remotes: {},
    exposes: {},
    shared: {
      ...require("./package.json").dependencies,
    },
  }),

  //...
]

Nesse 插件可用于配置远程模块（微前端）。

模块联盟的文献包括远程模块 (Módulos remotos) 的微前端。作为一部分，您可以使用模块或远程模块的命名法。

模块联盟的强大优势在于它可以远程调用 JavaScript 本地模块。使用正常的 comimport pack from package或 com 进行模块require('package')。微前端的外部策略不同，Single-SPA 的使用依赖于组件之间的集成，模块联盟使用 JavaScript 来实现。 E isso nos leva ao arquivo package.json。

您可以选择普通的项目，但不依赖于外部。需要确保Babel所有操作系统浏览器的兼容性。您可以选择 React 或 Vue 中的算法框架，这取决于您的项目。 E isso é 耸人听闻！ 🤩🤩🤩

配置项目以使用项目外的其他组件

请注意前面提到的所有配置webpack.config.js。

作为 ModuleFederationPlugin 原理的实现

• 专有名称：É o nome do seu módulo。与其他项目一起完成import x from name
• 专有文件名： 是 arquivo 的名称，它不是在 seu 组件的“contrato”上构建的。
• 共享财产： É aqui que você pode declarar quais pacotes você tem como dependentência e que podem ser compartilhados。例如，这些组件是在 React 中使用的，不需要在 React 中导入，它依赖于与 React 中的所有组件进行比较。
• 所有权公开： É aqui que declaramos quaispartes do nosso projeto queremos expor como um micro front-end. Podemos expor um único arquivo ou vários。 E 声明和算法非常简单。 A chave é o nome do modódulo eo valor é o caminho do arquivo。

....
plugins: [
        new VueLoaderPlugin(),
        new ModuleFederationPlugin({
            name: "YourPackageName",
            filename: "remoteEntry.js",
            remotes: {},
            exposes: {
                 "yourModuleName": "./src/yourModule/index.js",
            },
            shared: require("./package.json").dependencies,
        }),

您可以配置所有皮肤、构建应用程序、解决方案、待办事项或模块宣言、依赖项、功能、结束remoteEntry.js等。

Agora que tudo está confgurado pode dar um build no projeto e exponha a Pasta dos artefatos do build (geralemtne é a Pasta 'dist') em um server http.如果您不想使用 npm 服务，请使用 npm 的http-server包( https://www.npmjs.com/package/http-server )。

符合包装文件，可安装全球性com

npm install --global http-server

使用 basta executa-lo na sua Pasta de artefatos do build，例如：

 http-server ./dist

快点！ seu arquivo de manifesto do seu modulo remoto está acessível via http. 🥳🎉🎉

在项目结束时使用模块

在终端结束时，我们将使用“ create-mf-app ”进行新的项目。

完成项目后，您可以将第一个项目的导入或导出模块放入 npm 包中。该项目编号与远程项目编号相同。

这是关于 webpack 插件配置的“远程”属性的详细参考，符合前面的描述。

声明与 npm 协议不同。 Veja 的不同之处：

包.json

{
 //...
 "dependencies": {
    "axios": "^0.27.2",
 }
}

webpack.config.js

  //...
  plugins: [
        new ModuleFederationPlugin({
            // ...
            remotes: {
                 "App1": "http://localhost:8080/remoteEntry.js",
            },
            // ...
        }),
  //...
  ]

声明此模块为远程模块，名称为 ele 并参考互联网的描述。您可以在 localhost com 上执行项目或使用 http-server 端口开发服务，或使用 http-server 来实现。以 8080 为例。

É só isso gente！ Basta uma configuração muito simples no plugins para que um projeto Referenceencie o outro e possam compartilhar funcionalidades!✨🌟🤩✨🌟🤩

有关模块联盟的主要信息、应用程序示例、文档等。请参阅链接。

• https://webpack.js.org/concepts/module-federation/
• https://github.com/module-federation
• https://github.com/module-federation/module-federation-examples

Também um artigo de um case bem legal da Localiza

• https://medium.com/localizalabs/module-federation-o-futuro-do-microfrontend-4fed87983ec2