使用require.context实现前端工程自动化
使用require.context实现前端工程自动化
require.context是什么
一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
什么时候需要用到require.context
在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入,随着项目越来越大,结构越来越复杂,每次都得手动import就很是令人烦躁
这个时候我们可以使用require.context函数遍历modules文件夹的所有文件一次性导入到index.js中
require.context参数说明
require.context函数接受三个参数
- directory {String} -读取文件的路径
- useSubdirectories {Boolean} -是否遍历文件的子目录
- regExp {RegExp} -匹配文件的正则
1 | //例如 |
在index.js中调用 **require.context(‘./modules’, false, /.js$/);**会得到modules文件下3个文件的执行环境
值得注意的是require.context函数执行后返回的是一个函数,并且这个函数有3个属性
- resolve {Function} -接受一个参数request,request为modules文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
- keys {Function} -返回匹配成功模块的名字组成的数组
- id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载?
这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性)
废话不多说 直接上代码,看看怎么用
index.js自动化文件中这么写
1 | const files = require.context('./modules', false, /\.js$/) |
业务模块中这样写
1 | import Frame from '@/views/frame/Frame' |
大功告成!!!!
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Big0range!
评论