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));
};
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值