网站推广优化联系方式,大学生网站模板,做电商要关注哪些网站,如何免费制作和开发自己的小程序对于使用联邦模块的项目会有两个依赖#xff0c;一个是远程模块#xff0c;一个是共享模块。上一篇文章解释了远程模块的加载和安装并初始化共享作用域。consumes则是共享模块的解决方案#xff0c;用于在运行时加载并安装依赖的共享模块。
为什么叫consumes#xff1f;我…对于使用联邦模块的项目会有两个依赖一个是远程模块一个是共享模块。上一篇文章解释了远程模块的加载和安装并初始化共享作用域。consumes则是共享模块的解决方案用于在运行时加载并安装依赖的共享模块。
为什么叫consumes我理解是因为共享模块的获取是在__webpack_require__.I中完成的而consumes只是使用__webpack_require__.S中的数据来安装对应模块。所以consumes是在消费__webpack_require__.S中的数据。
__webpack_require__S.default {react: {version: {get() {}, ...}}}以上信息并没有在__webpack_require__.m上所以当前环境并不能使用共享作用域中的内容 var versionLt (a, b) {// see webpack/lib/util/semver.js for original codeaparseVersion(a),bparseVersion(b);for(var r0;;){if(ra.length)return rb.lengthu!(typeof b[r])[0];var ea[r],n(typeof e)[0];if(rb.length)returnun;var tb[r],f(typeof t)[0];if(n!f)returnonnf||(sf||un);if(o!nu!ne!t)return et;r}
}var findSingletonVersionKey (scope, key) {var versions scope[key];return Object.keys(versions).reduce((a, b) {return !a || (!versions[a].loaded versionLt(a, b)) ? b : a;}, 0);
};var satisfy (range, version) {// see webpack/lib/util/semver.js for original codeif(0 in range){versionparseVersion(version);var erange[0],re0;r(e-e-1);for(var n0,i1,a!0;;i,n){var f,s,girange.length?(typeof range[i])[0]:;if(nversion.length||o(s(typeof(fversion[n]))[0]))return!a||(ug?ie!r:g!r);if(us){if(!a||u!g)return!1}else if(a)if(gs)if(ie){if(f!range[i])return!1}else{if(r?frange[i]:frange[i])return!1;f!range[i](a!1)}else if(s!gn!g){if(r||ie)return!1;a!1,i--}else{if(ie||sg!r)return!1;a!1}elses!gn!g(a!1,i--)}}var t[],ot.pop.bind(t);for(n1;nrange.length;n){var urange[n];t.push(1u?o()|o():2u?o()o():u?satisfy(u,version):!o())}return!!o();
}var getSingletonVersion (scope, scopeName, key, requiredVersion) {var version findSingletonVersionKey(scope, key);if (!satisfy(requiredVersion, version)) typeof console ! undefined console.warn console.warn(getInvalidSingletonVersionMessage(scope, key, version, requiredVersion));return get(scope[key][version]);
};var get (entry) {entry.loaded 1;return entry.get()
};// 给入参函数注入依赖项共享作用域scope封装的是scope的获取
// 因为scope可能在初始化中也可能初始化完成
var init (fn) (function(scopeName, a, b, c) {var promise __webpack_require__.I(scopeName);// 等待共享作用域初始化完成if (promise promise.then) return promise.then(fn.bind(fn, scopeName, __webpack_require__.S[scopeName], a, b, c));return fn(scopeName, __webpack_require__.S[scopeName], a, b, c);
});var loadSingletonVersionCheckFallback /*#__PURE__*/ init((scopeName, scope, key, version, fallback) {if(!scope || !__webpack_require__.o(scope, key)) return fallback();return getSingletonVersion(scope, scopeName, key, version);
});var installedModules {};
var moduleToHandlerMapping {webpack/sharing/consume/default/react/react?5e40: () (loadSingletonVersionCheckFallback(default, react, [1,17,0,2], () (Promise.all([__webpack_require__.e(vendors-node_modules_react_index_js), __webpack_require__.e(node_modules_object-assign_index_js)]).then(() (() (__webpack_require__(/*! react */ ../node_modules/react/index.js))))))),webpack/sharing/consume/default/react-dom/react-dom: () (loadSingletonVersionCheckFallback(default, react-dom, [1,17,0,2], () (Promise.all([__webpack_require__.e(vendors-node_modules_react-dom_index_js), __webpack_require__.e(webpack_sharing_consume_default_react_react)]).then(() (() (__webpack_require__(/*! react-dom */ ../node_modules/react-dom/index.js))))))),webpack/sharing/consume/default/react/react?7071: () (loadSingletonVersionCheckFallback(default, react, [4,17,0,2], () (__webpack_require__.e(vendors-node_modules_react_index_js).then(() (() (__webpack_require__(/*! react */ ../node_modules/react/index.js)))))))
};
// no consumes in initial chunks
var chunkMapping {src_bootstrap_js: [webpack/sharing/consume/default/react/react?5e40,webpack/sharing/consume/default/react-dom/react-dom],webpack_sharing_consume_default_react_react: [webpack/sharing/consume/default/react/react?7071]
};
__webpack_require__.f.consumes (chunkId, promises) {if(__webpack_require__.o(chunkMapping, chunkId)) {chunkMapping[chunkId].forEach((id) {if(__webpack_require__.o(installedModules, id)) return promises.push(installedModules[id]);var onFactory (factory) {installedModules[id] 0;__webpack_require__.m[id] (module) {delete __webpack_require__.c[id];module.exports factory();}};var onError (error) {delete installedModules[id];__webpack_require__.m[id] (module) {delete __webpack_require__.c[id];throw error;}};try {var promise moduleToHandlerMapping[id]();if(promise.then) {promises.push(installedModules[id] promise.then(onFactory)[catch](onError));} else onFactory(promise);} catch(e) { onError(e); }});}
}chunkMapping中存着chunk对应共享模块的依赖而moduleToHandlerMapping中存着共享模块的获取方式通过方法__webpack_require__.f.consumes入参这两个数据就能解析chunk依赖的模块并对模块进行安装。
(loadSingletonVersionCheckFallback(default, react, [1,17,0,2], fallback))
这一行表达的是在共享作用域default上寻找版本为1.17.0.2的react如果找不到使用自带的模块fallback。
var init (fn) (function(scopeName, a, b, c) {var promise __webpack_require__.I(scopeName);// 等待共享作用域初始化完成if (promise promise.then) return promise.then(fn.bind(fn, scopeName, __webpack_require__.S[scopeName], a, b, c));return fn(scopeName, __webpack_require__.S[scopeName], a, b, c);
});var loadSingletonVersionCheckFallback /*#__PURE__*/ init((scopeName, scope, key, version, fallback) {if(!scope || !__webpack_require__.o(scope, key)) return fallback();return getSingletonVersion(scope, scopeName, key, version);
});init方法用于初始化对应共享作用域共享作用域加载完成后将相关作用域信息作为入参调用init的入参函数。
拿到作用域信息后调用方法getSingletonVersion(scope, scopeName, key, version)
getSingletonVersion
function getSingletonVersion(scope, scopeName, key, requiredVersion) {...return get(scope[key][version]);
}var get (entry) {entry.loaded 1;return entry.get();
};get方法的返回值会作为方法onFactory的入参
var onFactory (factory) {installedModules[id] 0;__webpack_require__.m[id] (module) {delete __webpack_require__.c[id];module.exports factory();}
};onFactory执行完成后__webpack_require__.m上就会出现对应的模块信息。到这里共享模块也安装完成了。
等待chunk src_bootstrap_js文件加载完成外部依赖准备完成共享模块准备完成后chunk src_bootstrap_js 则表示加载完成可以开始执行业务代码了。
名字的翻译
在源码中使用的名字是 import React from ‘react’而通过webpack编译后变成了”webpack/sharing/consume/default/react/react?5e40”并且在__webpack_require__.S上的名字也是react这些是怎么关联起来的呢 该问题同样存在于远程模块加载场景中。 ”webpack/sharing/consume/default/react/react?5e40”是怎么和共享作用域中的”react”关联起来的
在上面源码中
var moduleToHandlerMapping {webpack/sharing/consume/default/react/react?5e40: () (loadSingletonVersionCheckFallback(default, react, [1,17,0,2], () (Promise.all([__webpack_require__.e(vendors-node_modules_react_index_js), __webpack_require__.e(node_modules_object-assign_index_js)]).then(() (() (__webpack_require__(/*! react */ ../node_modules/react/index.js))))))),
}表示模块webpack/sharing/consume/default/react/react?5e40需要在共享作用域default中的1.17.0.2版本的react这里这两个名字就关联起来了。
源码中的 import React from ‘react’ 是怎么和 webpack/sharing/consume/default/react/react?5e40 关联起来的
源码中的
import React from react经过编译变成
var react__WEBPACK_IMPORTED_MODULE_0__ __webpack_require__(/*! react */ webpack/sharing/consume/default/react/react?5e40);
var react__WEBPACK_IMPORTED_MODULE_0___default /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);这样源码中的名字 ”react”就和webpack/sharing/consume/default/react/react?5e40关联起来了。
