requireContext.keys().map(requireContext)在批量导入时的作用

116 阅读 0 评论 77 点赞

我是靠谱客的博主文静短靴，这篇文章主要介绍requireContext.keys().map(requireContext)在批量导入时的作用，现在分享给大家，希望可以做个参考。

发现很多人在问 requireContext.keys().map(requireContext) 这么写是什么原理，原代码如下：

复制代码

1
2
3
4
const req = require.context('./svg', false, /.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

这是一个批量导入 .svg 文件的写法。

查阅一下 webpack 官网对 require.context 的返回值说明：
在这里插入图片描述
说的也很难理解，其实返回的是一个函数，有 keys 这么一个方法可以返回包含所有模块名的数组。

那么关键来了，这里传了一个最初的 requireContext 到 map() 函数里，也就是 require.context 的返回值，这个返回值是一个函数，只要传入函数名就会被 webpack 自动进行导入。

我们知道 map() 函数可以传一个参数，他就是遍历数组中的每一个对象：

复制代码

1
2
3
4
5
6
7
8
9
10
 var list = ["a", "b", "c"];

 var fun = item => {
   console.log(item)
 };

 list.map(fun)

 // 打印 a b c

通俗的说就可以换成类似如下的解释：

复制代码

1
2
3
4
5
6
7
function(requireContext) {
	requireContext.keys() // 得到了所有导入的模块名数组
				  .map(function(moduleName){
				  			autorequire(moduleName) // webpack 自动导入 
				  			})
				  				}

知道了什么意思，再看一下官网给的例子：

复制代码

1
2
3
4
5
6
function importAll (r) {
  r.keys().forEach(r);
}

importAll(require.context('../components/', true, /.js$/));

这个就很容易理解了，所有 js 会自动导入，但是如果我们要掌控呢？

看这个例子：

复制代码

1
2
3
4
5
6
7
8
const cache = {};

function importAll (r) {
  r.keys().forEach(key => cache[key] = r(key));
}

importAll(require.context('../components/', true, /.js$/));