require.context的用法。路由规则的自动化导入

Posted 2022-09-12 勇敢*牛牛

require.context的用法

自动导入routers中的路由模块，webpack中提供一个api方法，可以自动去检索对应目录下的模板。

const module =  reuire.context(".router",false,/\\.js$/i)

参数一:检索目录
参数二:是否递归对应的检索目录
参数三:指定最终的文件格式。（正则表达式）
返回值:函数模块

得到一个模块：

console.log(module);

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

这个模块的上的方法keys()是：得到这个相对目录下的索引名称。

console.log(module.keys());

通过这个方法得到这个模块函数。
const moduleFn = require.context('./routes',false,/\\.js$/);

遍历这个函数得到的每一个模块路径之后，传入得到默认的导出模块。

const routes = moduleFn.keys().reduce((p,v)=>
    let module = moduleFn(v).default;
    console.log(module);
    if(Array.isArray(module))
        p.push(...module);
    else
        p.push(module);
    
    return p;
,[])