requireContext => requireContext.keys().map(requireContext) 的解释

 

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
复制代码

require.context的官方介绍： webpack.js.org/guides/depe…

此处require.context()方法生成了一个类require方法，这个方法接收一个参数req，根据这个参数我们可以得到相应的模块信息。 比如传入svg目录下的404.svg文件名，req('./404.svg')，就会返回相对应的模块。

且这个类require方法有keys()方法，可以遍历获得目录下所有的子文件名。

所以结合起来就是

const requireAll = requireContext => requireContext.keys().map(requireContext)
复制代码

也就是

const requireAll = requireContext => requireContext.keys().map(i => requireContext(i))
复制代码

用这个方法就能实现快速引入。