参考:
使用require.context实现前端工程自动化:
https://www.jianshu.com/p/c894ea00dfec
始末:https://juejin.im/post/5c106485e51d450e657571a6
什么时候使用:
在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入,但是如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.context函数遍历modules文件夹的所有文件一次性导入到index.js中(排除index.js)。
require.context('./routes', false, /.test.js$/);
参数:读取文件的路径,是否遍历文件的子目录,匹配文件的正则。
值得注意的是require.context函数执行后返回的是一个函数,并且这个函数有3个属性:
resolve ,keys ,id 。
- resolve :函数。接受一个参数request。request为routes文件夹下面匹配文件的相对路径(eg:
files.keys()[0]
),返回这个匹配文件相对于整个工程的相对路径(eg:./src/router/routes/login.js
)。files.resolve(files.keys()[0])
- keys:函数。返回匹配成功模块的名字组成的数组。eg:
files.keys()
=>["./login.js","./reset.js"]
- id:string。eg:
files.id
=>"./src/router/routes sync \.js$"
talk is cheap ,show me the code