require.context()的用法
一般用于加载某个目录下的多个文件,如:const modules = require.context('./components/', false, /\.vue$/);require.context()接收三个参数,第一个参数是要加载的文件目录地址,第二个参数是true或false,表示是否需要加载子目录,第三个参数是个正则表达式,表示要加载哪些文件,上面代码表示要加载components目录下
一般用于加载某个目录下的多个文件,如:
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中。
更多推荐
所有评论(0)