使用require.context实现自动导入模块

1.什么是require.context

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
2.什么时候需要用到require.context
如果有以下情况,可以考虑使用require.context替换


在我的项目中，有n多个品牌，其中每个品牌对应自己条款细则，如果一个个的import导入路由的话，显然有点力不从心，看起来又很杂。这个时候我们只需用require.context遍历template文件夹把这些vue的路由整合到一个文件再导入。

3.分析require.context

require.context函数接受三个参数

1. directory {String} -读取文件的路径
2. useSubdirectories {Boolean} -是否遍历文件的子目录
3. regExp {RegExp} -匹配文件的正则

语法: require.context(directory, useSubdirectories = false, regExp = /^.//);

借用webpakc官网的例子

require.context('./test', false, /.test.js$/);

上面的代码遍历当前目录下的test文件夹的所有.test.js结尾的文件,不遍历子目录
值得注意的是require.context函数执行后返回的是一个函数,并且这个函数有3个属性

1. resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
2. keys {Function} -返回匹配成功模块的名字组成的数组
3. id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载?

这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性)

4.把template目录下的vue文件的路由整合到template.router.js

其中files(key).default返回的就是我们vue-component的结构；把confinRouter暴露出去，然后再到我们的主体路由引入这个template.router.js

原文参考：https://www.jianshu.com/p/c894ea00dfec