require.context的理解

对下面这段代码的理解

const srcContext = require.context('../../src', true, /\.(vue|js)$/);
srcContext.keys().forEach(srcContext);

第一行代码,定义的常量 srcContext返回的内容如下:

var map={
"./components/test/test.vue": "./src/components//test/test.vue",
	"./pages/index.js": "./src/pages/index.js"
};
function webpackContext(req) {
	return __webpack_require__(webpackContextResolve(req));
};
function webpackContextResolve(req) {
	var id = map[req];
	if(!(id + 1)) // check for number or string
		throw new Error("Cannot find module '" + req + "'.");
	return id;
};
webpackContext.keys = function webpackContextKeys() {
	return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./src recursive \\.(vue|js)$";

第二行代码,srcContext.keys()返回的内容如下:

["./components/test/test.vue","./pages/index.js"]

forEach(srcContext)中的srcContext 就是module.exports后的webpackContext;
其实调用的是 function webpackContext(req){ };
传入的req参数为srcContext.keys()中的每一项;
如:第一次遍历的时候传入的是"./components/test/test.vue",
调用webpackContextResolve(req)后返回的值为 “./src/components//test/test.vue”;
调用下面的方法后,会将正则表达式匹配到的所有的文件require进来

function webpackContext(req) {
	return __webpack_require__(webpackContextResolve(req));
};

你可能感兴趣的:(技术分享)