一般用于加载某个目录下的多个文件,如:

const modules = require.context('./components/', false, /\.vue$/);

require.context()接收三个参数,第一个参数是要加载的文件目录地址,第二个参数是true或false,表示是否需要加载子目录,第三个参数是个正则表达式,表示要加载哪些文件,上面代码表示要加载components目录下的.vue文件。

modules得到的值是一个函数:

ƒ webpackContext(req) {
	var id = webpackContextResolve(req);
	return __webpack_require__(id);
}

该函数有三个属性:resolve,keys,id。

通过打印modules.resolve,modules.keys,modules.id可以得到相应结果

modules.resolve

ƒ webpackContextResolve(req) {
	if(!__webpack_require__.o(map, req)) {
		var e = new Error("Cannot find module '" + req + "'");
		e.code = 'MODULE_NOT_FOUND';
		throw e;
	}
	return map[req];
}

modules.keys

ƒ webpackContextKeys() {
	return Object.keys(map);
}

modules.id

./src/store sync \.js$

 可以看出resolve和keys都是函数,id暂时没有应用场景,所以这里不做介绍。

modules.resolve接收一个参数,这个参数是modules这个函数传入的参数

ƒ webpackContext(req) {
	var id = webpackContextResolve(req);
	return __webpack_require__(id);
}

modules.resolve也就是webpackContextResolve(req),返回的是加载模块的id,接收的参数req是加载文件的相对路径,这个值可以从keys方法的返回值中获取到。

上面代码中return __webpack_require__(id),将会执行加载该模块的指令。

modules.keys()的返回结果是一个数组,数组中的值是components目录下文件的相对路径,如['./a.vue','./b.vue','./c.vue']。

经过以上代码讲解后,通过require.context方法加载模块的写法如下,以加载store中的modules为例:

const modules = require.context('./modules', true, /\.js$/).keys().reduce((modules, modulePath) => {
    // set './app.js' => 'app'
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');
    const value = require.context('./modules', true, /\.js$/)(modulePath);
    modules[moduleName] = value.default;
    return modules;
}, {});

const store = new Vuex.Store({
    modules
});

通过reduce方法循环,将每个js中export default出的对象放在modules中并return,最后将modules丢到Vuex.Strore中。

Logo

前往低代码交流专区

更多推荐