【施工中】模块联邦插件&Runtime脑暴

[tachish]

Above All

farm 版本：基于目前 farm v2 nightly 版本讨论（分支 v2-dev）
远程模块（remote module）：被生产者生产的模块， 可被消费者通过异步加载的方式进行消费。（模块联邦插件 exposes 配置的打包产物）

关于生产（expose）实现

模块联邦整体运行流程大致如上，`remote module`部分为插件根据exposes 配置打包的产物。

Container 容器

• Container 容器是什么 👀
  Container 容器作为远程模块的入口文件，在模块联邦中为消费者提供统一的接口，消费者可以通过这些接口实现对异步模块的消费
• 接口定义

接口详情可参考https://webpack.js.org/concepts/module-federation/#dynamic-remote-containers

远程模块需要实现init和 get接口。init接口负责异步模块的初始化；get接口负责返回异步模块的工厂方法。
在webpack的实现中，这两个接口定义如下

var init = (shareScope, initScope) => {}
var get = (module, getScope) => {}

• Container Runtime实现
  下面给出 Container Runtime 的伪代码（get部分DONE，init部分TODO）。例子部分 ModuleFederationPlugin Config 如下：

  ModuleFederationPlugin({
      name: "RemoteModuleExportName",
      filename: 'remoteEntry.js',
      exposes: {
        './Button': './src/Comp.ts'
      },
  })

// 全局变量，用于引入方加载 
var RemoteModuleExportName;
// 模块映射部分
(function(moduleSystem, modules) {
    for(var moduleId in modules){
        var module = modules[moduleId];
        moduleSystem.g(moduleId, module);
    }
})(window["489eb5a659d72f0f09a4ccc1118a1e99"].m, {
    "src/Comp.ts": function(module, exports, farmRequire, farmDynamicRequire) {
        // module federation 中导出模块的映射，如
        // 【导出方】从 Comp.ts 中导出 Button
        // 【引入方】使用 import { Button } from "./RemoteModuleExportName";
        let moduleMap = {
            "./Button": () => farmDynamicRequire("src/Comp.ts")
        }

        farmRequire._m(exports);
        // module federation interface definition
        farmRequire.o(exports, "get", function(module, getScope) {
            // get interface implementation
            // module federation's
            farmRequire.R = getScope;
            getScope = (
                moduleMap[module]
                    ? moduleMap[module]()
                    : Promise.resolve().then(() => {
                        throw new Error('Module "' + module + '" does not exist in container.');
                    })
            );
            farmRequire.R = undefined;
            return getScope;
        });
        farmRequire.o(exports, "init", function() {
            // init interface implementation
            // TODO shared 配置相关实现，实现加载流程后再加
        });

        farmRequire.o(exports, "__farm_async", function() {
            return __farm_async;
        });
        var __farm_async = true;
        RemoteModuleExportName = exports;
    }
});

//# sourceMappingURL=Comp.ts_5232.js.map

[DOING] 模块联邦中间件

webpack中通过 __webpack_require__.f 下的一系列中间件来完成了模块联邦加载 remote module和共享作用域等一系列工作。下面将给出对应中间件在 farm 中的实现：
1、__webpack_require__.f.remotes
2、__webpack_require__.f.consumes

[TODO] 关于消费（remote）实现

按上文实现了 expose 之后，用户应该就可以通过 @module-federation/core 进行消费了；如果希望后续提供build-in的消费支持，插件侧也需要实现一套同样的消费逻辑🤔