一.需求
当我们在开发的过程中,需要导入很多的文件,但是又不想每个文件依次倒入的时候,就会想有没有一种方法可以批量导入.require的context方法就可解决这个问题.
二.实现
1.代码
const path = require('path')
const files = require.context('@/components', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
const name = path.basename(key, '.vue')
modules[name] = files(key).default || files(key)
})
2.代码详解
1.require.context
require.context(directory, useSubdirectories, regExp)
- directory: 要查找的文件路径
- useSubdirectories: 是否查找子目录
- regExp: 要匹配文件的正则
2.1.require.context.key()
const ctx = require.context('./components/', true, /\.js$/)
console.log(ctx.keys())
// ["./A.js", "./B.js", "./C.js", "./D.js"]
require.context.keys()返回一个数组,数组中的每个元素传入require.context方法中,就可以导出相应的文件
const ctx = require.context('./components/', true, /\.js$/)
const map = {}
for (const key of ctx.keys()) {
map[key] = ctx(key)
}
console.log(map)
map打印值.png
