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

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

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() 函数可以传一个参数，他就是遍历数组中的每一个对象：

 var list = ["a", "b", "c"];

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

 list.map(fun)

 // 打印 a b c

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

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

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

function importAll (r) {
  r.keys().forEach(r);
}

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

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

看这个例子：

const cache = {};

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

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

cache 会被填充成以 js 文件名为 key ，以实际模块为 value 的对象。

那将 cache 给 export 后，就可以在其他文件中对其导入并掌控。

注：可能不少人疑问官网为什么要使用 forEach() 遍历还套一层函数，用 map() 不香吗？ 因为 forEach() 性能比 map() 要好，map() 比 for 在遍历时要慢几百倍，如果追求性能，更推荐手工 for。