require.context(‘./svg‘, false, /\.svg$/)
require.context(’./svg’, false, /.svg$/)require.contextconst req = require.context('./svg', false, /\.svg$/)const requireAll = requireContext => requireContext.keys().map(requireContext)requireAll(
·
require.context
const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)
vue-element-admin
中看到上面代码,什么意思呢?
首先 require.context
是 Webpack 提供的 API,详见文档,接受的 3 个参数的含义分别为:
// 引入资源的目录、是否需要遍历子目录、匹配文件的规则
const req = require.context('./svg', false, /\.svg$/)
它的返回值 req
也是一个函数,此函数有一个重要的属性和一个重要的功能!
属性:req.keys,属性值是一个方法,调用后返回的是一个路径数组,例如 ["./dashboard.svg", "./example.svg"]
功能:接受一个路径,解析路径并引入!通过打印可以发现如下:
webpackContext(req) {
// 解析传递过来的路径,例如 './dashboard.svg'
var id = webpackContextResolve(req);
// 引入
return __webpack_require__(id);
}
requireAll
// map(requireContext) 意思是每次遍历调用 requireContext 这个函数,并把数组中的第一项传递给 requireContext 函数中
const requireAll = requireContext => requireContext.keys().map(requireContext)
// requireAll(req) 得到的是一个解析完毕后的数组,不过这里这个数组并没有被使用到!
requireAll(req)
如果上面代码看上去还是有点迷糊,翻译成下面的写法应该懂了吧,等价!
req.keys().forEach(key => req(key))
更多推荐
已为社区贡献1条内容
所有评论(0)