require.context批量导入模块运用解析

require是Commonjs模块方法所带的语法

require和import都是用于导入相关模块的语法只不过import来自Es6原生,而require来自CommonJs。

require.context批量导入原理

webpack官网文档的说明如下

如果我们要批量导入一堆模块,单独一个一个require太慢了。所以用require.context函数。

函数传入三个值,要查找的入口地址,是否需要遍历子层级,正则匹配规则。然后会返回一个函数。

函数拆析如下

通过分析我们可以得知函数的keys属性可以获取我们要导入的模块的文件名

而函数可以通过传入文件路径来加载模块并返回模块。

第一次我们用函数的keys属性拿到了各个文件的名字。

第二次我们直接调用函数,依次传入路径,得到了模块组成的数组。

总之我们得到了想要导入的各个模块

解释:返回函数的.keys方法不是JavaScript的keys方法不要误会。

基础知识备注(for JavaScript):

数组的map方法:map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。

对象的keys方法:返回一个所有元素为字符串的数组,其元素来自于从给定的object上面可直接枚举的属性。这些属性的顺序与手动遍历该对象属性时的一致。

数组的foreach方法:对数组的每个元素执行一次给定的函数。

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注