require.context
一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
我想使用require.context引入components目录下的所有组件:
webpack会在构建的时候解析代码中的require.context()。
require.context函数接收三个参数:
- directory {String} -读取文件的路径
- useSubdirectories {Boolean} -是否遍历文件的子目录
- regExp {RegExp} -匹配文件的正则
// 语法
let files = require.context(directory, useSubdirectories = false, regExp = /^\.\//);
require.context模块导出(返回)一个(require)函数files,这个函数有三个属性:
- resolve:是一个函数,接受一个参数:directory下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径。
- keys:也是一个函数,它返回一个数组,返回匹配成功模块的名字组成的数组(不包括文件夹名称)。
- id:执行环境的