一.需求

当我们在开发的过程中,需要导入很多的文件,但是又不想每个文件依次倒入的时候,就会想有没有一种方法可以批量导入.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)

1. directory: 要查找的文件路径
2. useSubdirectories: 是否查找子目录
3. 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