1. 动机 #

1608851460103

2. 模块联邦 #

1608851582909

3. 模块联邦概述 #

1608851802459

4. 案例 #

4.1 总览 #

1608852930390

4.2 项目加载 #

4.3 teamB #

1608853245251

1608853337262

4.4 teamA #

6.teamaconsume.png

5. 项目配置 #

7.howtouse.png

1.初始化项目 #

1.创建项目 #

mkdir teama
cd teama
npm init -y

mkdir teamb
cd teamb
npm init -y

2.安装依赖 #

cd teama
cd teamb
npm install webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
npm install is-array --save

2. 配置项目 #

配置参数

字段 类型 含义
name string 项目名称,应用的身份证,在应用分享资源的时候使用的标识,被远程引用时路径为${name}/${expose}
library object 暴露项目的全局变量名 格式为 {type:'var',name:projectName}
filename string 构建后的文件名,也是远程引入的文件名
remotes object 远程引用的应用名及其别名的映射,格式为 {远程项目别名:远程引入的项目名(其它应用name字段)}
exposes object 被远程引用时可暴露的资源路径及其别名,格式为{别名:组件的路径}
shared object 与其他应用之间可以共享的第三方依赖,可以在此控制版本号
title string head的标题
files object 远程调用项目的文件链接

2.1 teamb #

2.1.1 Button.js #

teamb\src\Button.js

import isArray from 'is-array';
export default `(Button[${isArray.name}])`;

teamb\src\Dropdown.js

import isArray from 'is-array';
import ArrowIcon from './ArrowIcon';
export default `(Dropdown[${ArrowIcon}][${isArray.name}])`;

2.1.3 ArrowIcon.js #

teamb\src\ArrowIcon.js

export default  'ArrowIcon';

2.1.4 bootstrap.js #

teamb\src\bootstrap.js

import isArray from 'is-array';
let Dropdown = await import('./Dropdown');
let Button = await import('./Button');
console.log(Dropdown.default); 
console.log(Button.default); 
console.log(isArray.name); 

2.1.5 index.js #

teamb\src\index.js

import("./bootstrap");

2.1.4 teamb\webpack.config.js #

2.1.5 teamb\public\index.html #

teamb\public\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>teamb</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

2.1.6 package.json #

{
  "scripts": {
    "build": "webpack",
    "start": "webpack serve"
  },
}

2.1.7 启动 #

npm run build
npm run start

2.2 teama #

2.2.1 LoginModal.js #

teama\src\LoginModal.js

import isArray from 'is-array';
let Button = await import('teamb/Button');
export default  `(LoginModal[${Button.default}][${isArray.name}])`;

2.2.2 HomePage.js #

teama\src\HomePage.js

import isArray from 'is-array';
let Dropdown = await import('teamb/Dropdown');
let LoginModal = await import('./LoginModal');
export default `(HomePage[${Dropdown.default}][${LoginModal.default}][${isArray.name}])`

2.2.3 bootstrap.js #

teama\src\bootstrap.js

import HomePage from './HomePage';
console.log(HomePage);

2.2.4 index.js #

teama\src\index.js

import("./bootstrap");

2.2.5 webpack.config.js #

teama\webpack.config.js

let HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");
module.exports = {
    mode: "development",
    devtool: false,
    output: {
        publicPath: "http://localhost:3000/"
    },
    target: ['es6', 'web'],
    experiments: {
        topLevelAwait: true
    },
    devServer: {
        port: 3000
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        }),
        new ModuleFederationPlugin({
            filename: "remoteEntry.js",
            name: "teama",
            library: { type: 'var', name: 'teamaVar' },
            remotes: {
                teamb: "teambVar@http://localhost:8000/remoteEntry.js"
            },
            shared: ["is-array"]
        })
    ]
}

3. 运行原理 #

mo_kuai_lian_bang_1626947283369

3.1 teamb #

3.1.1 remoteEntry.js #

window.teamb = (() => {
    var modules = ({
        "webpack/container/entry/teamb":
            ((module, exports, require) => {
                var moduleMap = {
                    "./Dropdown": () => {
                        return Promise.all([require.e("webpack_sharing_consume_default_is-array_is-array"), require.e("src_Dropdown_js")]).then(() => () => require("./src/Dropdown.js"));
                    },
                    "./Button": () => {
                        return Promise.all([require.e("webpack_sharing_consume_default_is-array_is-array"), require.e("src_Button_js")]).then(() => () => require("./src/Button.js"));
                    }
                };
                var get = (module) => {
                    return moduleMap[module]();
                };
                //初始化作用域
                var init = (shareScope) => {
                    var name = "default";
                    require.S[name] = shareScope;
                    return require.I(name);
                };
                require.d(exports, {
                    get: () => get,
                    init: () => init
                });
            })
    });
    var cache = {};
    function require(moduleId) {
        if (cache[moduleId]) {
            return cache[moduleId].exports;
        }
        var module = cache[moduleId] = {
            exports: {}
        };
        modules[moduleId](module, module.exports, require);
        return module.exports;
    }
    require.n = (module) => {
        var getter = module && module.__esModule ?
            () => module['default'] :
            () => module;
        return getter;
    };
    require.d = (exports, definition) => {
        for (var key in definition) {
            Object.defineProperty(exports, key, { get: definition[key] });
        }
    };
    require.f = {};
    require.e = (chunkId) => {
        return Promise.all(Object.keys(require.f).reduce((promises, key) => {
            require.f[key](chunkId, promises);
            return promises;
        }, []));
    };
    require.u = (chunkId) => {
        return "" + chunkId + ".js";
    };
    require.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)
    require.l = (url, done) => {
        var script = document.createElement('script');
        script.src = url;
        script.onload = done
        document.head.appendChild(script);
    };
    require.r = (exports) => {
        Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
        Object.defineProperty(exports, '__esModule', { value: true });
    };
    require.S = {};
    require.I = (name) => {
        if (require.S[name])
            return Promise.resolve();
    };
    require.p = "http://localhost:8000/";
    //初始化作用域
    var init = (fn) => function (scopeName, key, version) {
        //先保证作用域存在
        return require.I(scopeName).then(() => {
            //返回作用域指定版本对应的模块
            return fn(require.S[scopeName], key, version);
        });
    };
    //加载共享作用域
    var loadShareScope = init((scope, key, version) => {
        //获取版本
        var versions = scope[key];
        //获取指定版本
        var entry = versions[version];
        return entry.get()
    });
    (() => {
        var moduleToHandlerMapping = {
            "webpack/sharing/consume/default/is-array/is-array": () => loadShareScope("default", "is-array", '1.0.1')
        };
        var chunkMapping = {
            "webpack_sharing_consume_default_is-array_is-array": [
                "webpack/sharing/consume/default/is-array/is-array"
            ]
        };
        require.f.consumes = (chunkId, promises) => {
            if (require.o(chunkMapping, chunkId)) {
                chunkMapping[chunkId].forEach((id) => {
                    let promise = moduleToHandlerMapping[id]().then((factory) => {
                        modules[id] = (module) => {
                            module.exports = factory();
                        }
                    })
                    promises.push(promise);
                });
            }
        }
    })();
    var installedChunks = {
        "teamb": 0
    };
    require.f.j = (chunkId, promises) => {
        if ("webpack_sharing_consume_default_is-array_is-array" != chunkId) {
            var promise = new Promise((resolve, reject) => {
                installedChunks[chunkId] = [resolve, reject];
            });
            promises.push(promise);
            var url = require.p + require.u(chunkId);
            require.l(url);
        }
    };
    var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
        var [chunkIds, moreModules, runtime] = data;
        var moduleId, chunkId, i = 0, resolves = [];
        for (; i < chunkIds.length; i++) {
            chunkId = chunkIds[i];
            if (require.o(installedChunks, chunkId) && installedChunks[chunkId]) {
                resolves.push(installedChunks[chunkId][0]);
            }
            installedChunks[chunkId] = 0;
        }
        for (moduleId in moreModules) {
            if (require.o(moreModules, moduleId)) {
                modules[moduleId] = moreModules[moduleId];
            }
        }
        if (runtime) runtime(require);
        if (parentChunkLoadingFunction) parentChunkLoadingFunction(data);
        while (resolves.length) {
            resolves.shift()();
        }
    }
    var chunkLoadingGlobal = self["webpackChunkteamb"] = self["webpackChunkteamb"] || [];
    chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
    chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
    return require("webpack/container/entry/teamb");
})();

3.1.2 src_Dropdown_js.js #

teamb\dist\src_Dropdown_js.js

(self["webpackChunkteamb"] = self["webpackChunkteamb"] || []).push([["src_Dropdown_js"], {
    "./src/ArrowIcon.js":
        ((module, exports, require) => {
            "use strict";
            require.r(exports);
            require.d(exports, {
                "default": () => DEFAULT_EXPORT
            });
            const DEFAULT_EXPORT = ('ArrowIcon');
        }),
    "./src/Dropdown.js":
        ((module, exports, require) => {
            "use strict";
            require.r(exports);
            require.d(exports, {
                "default": () => DEFAULT_EXPORT
            });
            var is_array_0__ = require("webpack/sharing/consume/default/is-array/is-array");
            var is_array_0___default = require.n(is_array_0__);
            var _ArrowIcon_1__ = require("./src/ArrowIcon.js");
            const DEFAULT_EXPORT = (`(Dropdown[${_ArrowIcon_1__.default}][${(is_array_0___default().name)}])`);
        })
}]);

3.1.3 src_Button_js.js #

teamb\dist\src_Button_js.js

(self["webpackChunkteamb"] = self["webpackChunkteamb"] || []).push([["src_Button_js"], {
    "./src/Button.js":
        ((module, exports, require) => {
            require.r(exports);
            require.d(exports, {
                "default": () => DEFAULT_EXPORT
            });
            var is_array_0__ = require("webpack/sharing/consume/default/is-array/is-array");
            var is_array_0___default = require.n(is_array_0__);
            const DEFAULT_EXPORT = (`(Button[${(is_array_0___default().name)}])`);
        })
}]);
/**
console.log(require.cache);
./src/ArrowIcon.js: {exports: Module}
./src/Button.js: {exports: Module}
./src/Dropdown.js: {exports: Module}
webpack/container/entry/teamb: {exports: {…}}
webpack/sharing/consume/default/is-array/is-array: {exports: ƒ}
 */

3.2 teama #

3.2.1 main.js #

teama\dist\main.js

(() => {
    //模块定义
    var modules = ({
        "webpack/container/reference/teamb": ((module, exports, require) => {
            //加载远程脚本,返回 window.teamb
            module.exports = new Promise((resolve) => {
                require.l("http://localhost:8000/remoteEntry.js", resolve);
            }).then(() => window.teamb);
        })
    });
    var cache = {};
    function require(moduleId) {
        if (cache[moduleId]) {
            return cache[moduleId].exports;
        }
        var module = cache[moduleId] = {
            exports: {}
        };
        modules[moduleId](module, module.exports, require);
        return module.exports;
    }
    //如果在ES module,取default,否则取自己
    require.n = (module) => {
        var getter = module && module.__esModule ?
            () => module['default'] :
            () => module;
        return getter;
    };
    require.d = (exports, definition) => {
        for (var key in definition) {
            Object.defineProperty(exports, key, { get: definition[key] });
        }
    };
    require.u = (chunkId) => {
        return "" + chunkId + ".js";
    };
    require.o = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
    require.l = (url, done) => {
        var script = document.createElement('script');
        script.src = url;
        script.onload = done
        document.head.appendChild(script);
    };
    require.r = (exports) => {
        Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
        Object.defineProperty(exports, '__esModule', { value: true });
    };
    require.f = {};
    require.e = (chunkId) => {
        return Promise.all(Object.keys(require.f).reduce((promises, key) => {
            require.f[key](chunkId, promises);
            return promises;
        }, []));
    };
    (() => {
        //远程模块的代码码映射
        var chunkMapping = {
            "webpack_container_remote_teamb_Dropdown": [
                "webpack/container/remote/teamb/Dropdown"
            ],
            "webpack_container_remote_teamb_Button": [
                "webpack/container/remote/teamb/Button"
            ]
        };
        var idToExternalAndNameMapping = {
            "webpack/container/remote/teamb/Dropdown": [
                "default",//命名空间
                "./Dropdown",//导出的名称
                "webpack/container/reference/teamb"//来自哪个外部模块
            ],
            "webpack/container/remote/teamb/Button": [
                "default",
                "./Button",
                "webpack/container/reference/teamb"
            ]
        };
        //加载远程模块
        require.f.remotes = (chunkId, promises) => {
            //如果是外部模块,则加载
            if (require.o(chunkMapping, chunkId)) {
                //获取外部模块的id
                chunkMapping[chunkId].forEach((id) => {
                    //获取外部模块的名称 scopeName 作用域名称 remoteExposeName远程暴露的名称 远程ID
                    var [scopeName, remoteExposeName, remoteId] = idToExternalAndNameMapping[id];
                    //获取外部模块的代码
                    let promise = require(remoteId).then(external => {
                        //获取external外部变量,初始化作用域
                        return require.I(scopeName).then(() => {
                            //获取远程暴露的模块定义
                            return external.get(remoteExposeName).then(factory => {
                                //获取远程暴露的模块实例
                                modules[id] = (module) => {
                                    //执行工厂方法,获取远程模块实例
                                    module.exports = factory();
                                }
                            });
                        });
                    });
                    promises.push(promise);
                });
            }
        }
    })();
    //存放scope
    require.S = {};
    //初始化scope
    require.I = (name) => {
        if (require.S[name])
            return Promise.resolve();
        var scope = require.S[name] = {};
        //注册共享模块
        var register = (name, version, factory) => {
            var currentScope = scope[name] = scope[name] || {};
            currentScope[version] = { get: factory };
        };
        var promises = [];
        //初始化远程外部模块
        var initExternal = (id) => {
            var module = require(id);
            let promise = module.then(module => module.init(scope));
            promises.push(promise);
        }
        //scope的名称
        switch (name) {
            case "default": {
                register("is-array", "1.0.1", () => require.e("node_modules_is-array_index_js").then(() => () => require("./node_modules/is-array/index.js")));
                initExternal("webpack/container/reference/teamb");
            }
                break;
        }
        return Promise.all(promises)
    };
    require.p = "http://localhost:3000/";
    var init = (fn) => function (scopeName, key, version) {
        return require.I(scopeName).then(() => {
            return fn(require.S[scopeName], key, version);
        });
    };
    var loadShareScope = init((scope, key, version) => {
        var versions = scope[key];
        var entry = versions[version];
        return entry.get()
    });
    (() => {
        //share scope consumed modules
        var moduleToHandlerMapping = {
            "webpack/sharing/consume/default/is-array/is-array": () => loadShareScope("default", "is-array", '1.0.1')
        };
        var chunkMapping = {
            "src_bootstrap_js": [
                "webpack/sharing/consume/default/is-array/is-array"
            ]
        };
        require.f.consumes = (chunkId, promises) => {
            if (require.o(chunkMapping, chunkId)) {
                chunkMapping[chunkId].forEach((id) => {
                    let promise = moduleToHandlerMapping[id]().then((factory) => {
                        modules[id] = (module) => {
                            module.exports = factory();
                        }
                    })
                    promises.push(promise);
                });
            }
        }
    })();
    var installedChunks = {
        "main": 0
    };
    require.f.j = (chunkId, promises) => {
        if (!/^webpack_container_remote_teamb_(Button|Dropdown)$/.test(chunkId)) {
            var promise = new Promise((resolve, reject) => {
                installedChunks[chunkId] = [resolve, reject];
            });
            promises.push(promise);
            var url = require.p + require.u(chunkId);
            require.l(url);
        }
    };
    var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
        var [chunkIds, moreModules] = data;
        var moduleId, chunkId, i = 0, resolves = [];
        for (; i < chunkIds.length; i++) {
            chunkId = chunkIds[i];
            if (require.o(installedChunks, chunkId) && installedChunks[chunkId]) {
                resolves.push(installedChunks[chunkId][0]);
            }
            installedChunks[chunkId] = 0;
        }
        for (moduleId in moreModules) {
            if (require.o(moreModules, moduleId)) {
                modules[moduleId] = moreModules[moduleId];
            }
        }
        if (parentChunkLoadingFunction) parentChunkLoadingFunction(data);
        while (resolves.length) {
            resolves.shift()();
        }
    }
    var chunkLoadingGlobal = self["webpackChunkteama"] = self["webpackChunkteama"] || [];
    chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
    chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
    require.e("src_bootstrap_js").then(require.bind(require, "./src/bootstrap.js"));
})();

3.2.2 src_bootstrap_js.js #

teama\dist\src_bootstrap_js.js

(self["webpackChunkteama"] = self["webpackChunkteama"] || []).push([["src_bootstrap_js"], {
    "./src/HomePage.js":
        ((module, exports, require) => {
            "use strict";
            module.exports = (async () => {
                require.r(exports);
                require.d(exports, {
                    "default": () => DEFAULT_EXPORT
                });
                var is_array_0__ = require("webpack/sharing/consume/default/is-array/is-array");
                var is_array_0___default = require.n(is_array_0__);
                let Dropdown = await require.e("webpack_container_remote_teamb_Dropdown").then(require.bind(require, "webpack/container/remote/teamb/Dropdown"));
                let LoginModal = await require.e("src_LoginModal_js").then(require.bind(require, "./src/LoginModal.js"));
                const DEFAULT_EXPORT = (`(HomePage[${Dropdown.default}][${LoginModal.default}][${(is_array_0___default().name)}])`);
                return exports;
            })();
        }),
    "./src/bootstrap.js":
        ((module, exports, require) => {
            "use strict";
            module.exports = (async () => {
                require.r(exports);
                var _HomePage_0__ = require("./src/HomePage.js");
                _HomePage_0__ = await Promise.resolve(_HomePage_0__);
                console.log(_HomePage_0__.default);
                return exports;
            })();
        })
}]);

3.2.3 src_LoginModal_js.js #

teama\dist\src_LoginModal_js.js

(self["webpackChunkteama"] = self["webpackChunkteama"] || []).push([["src_LoginModal_js"], {
    "./src/LoginModal.js":
        ((module, exports, require) => {
            "use strict";
            module.exports = (async () => {
                require.r(exports);
                require.d(exports, {
                    "default": () => DEFAULT_EXPORT
                });
                var is_array_0__ = require("webpack/sharing/consume/default/is-array/is-array");
                var is_array_0___default = require.n(is_array_0__);
                let Button = await require.e("webpack_container_remote_teamb_Button").then(require.bind(require, "webpack/container/remote/teamb/Button"));
                const DEFAULT_EXPORT = (`(LoginModal[${Button.default}][${(is_array_0___default().name)}])`);
                return exports;
            })();
        })
}]);

3.2.4 node_modules_is-array_index_js.js #

teama\dist\node_modules_is-array_index_js.js

(self["webpackChunkteama"] = self["webpackChunkteama"] || []).push([["node_modules_is-array_index_js"], {
    "./node_modules/is-array/index.js":
        ((module) => {
            console.log('双方共享的是teama的isArray');
            var isArray = Array.isArray;
            var str = Object.prototype.toString;
            module.exports = isArray || function (val) {
                return !!val && '[object Array]' == str.call(val);
            };
        })
}]);

4.EMP #

参考 #