什么是webpack的require.context
require.context: 是webpack提供的一个接口,可以构建自己的上下文。
什么时候用?
当一个js里面需要手动引入过多的其他文件里面的文件时,就可以使用。
参数和返回值
返回值是对象类型。因为可以使用对象的
.keys()方法 可以给这个函数传入三个参数:一个要搜索的目录,一个标记表示是否还搜索其子目录, 以及一个匹配文件的正则表达式。 语法如下:require.context(directory, useSubdirectories = false, regExp = /^\.\//);例如:
//useSubdirectories = false
require.context('./test', false, /\.test\.js$/);
(创建出)一个 context,其中文件来自 test 目录,request 以 `.test.js` 结尾。
//useSubdirectories = true
require.context('../', true, /\.stories\.js$/);
(创建出)一个 context,其中所有文件都来自父文件夹及其所有子级文件夹,request 以 `.stories.js` 结尾。
实际应用:
场景1 : 写测试文件时,需要index.js里面引入多个预先定义好spec文件夹下面,多个以.spec.js结尾的js文件, element UI test里面就是这么干的


场景2 : 上面引入了js文件,那举一反三,是不是也可以批量引入vue或者react文件?当然可以,而且上面不要求顺序,如果要求的是引入多个数组,并且引入后仍然能保证数组导出时的顺序,可以导出前给每项加一个表明顺序的属性,再导入后判断即可。参考这里

小结
- 使用
require.context可以实现自动导入ES模块 - 带着目的多看源码,善于站在巨人的肩膀上,善于使用工具函数,例如webpack的
require.context - 技术不是目的,目的是用技术解决实际的问题
- 学好英语!!!