1、什么是 require.context
2、使用
| 参数 | 类型 | 说明 |
|---|---|---|
| dirname | String | 需要读取模块的文件的所在目录 |
| useSubdirectories | Boolean | 是否遍历子目录 |
| RegExp | RegExp | 匹配的规则（正则表达式） |
//遍历svg目录下的所有svg文件
const req = require.context('./svg', false, /\.svg$/)
3、返回结果
| 属性 | 类型 | 说明 |
|---|---|---|
| resolve | Function | 接受一个参数request，request为文件夹下面匹配文件的相对路径，返回这个匹配文件相对于整个工程的相对路径 |
| keys | Function | 返回一个数组，由匹配成功的文件所组成的数组 |
| id | String | 执行环境的 id |
4、自动加载目录下特定 js 文件，并将模块数据添加进原型链属性中
// api/index.js
const path = require('path');
const moduleList = {};
const dirname = "@/api"
reqContext(dirname);
function reqContext(dir) {
// 匹配特定 js 文件
const fileList = require.context(dir , true, /(api).js$/);
let files = fileList.keys();
if(!files.length) return ;
files.forEach( paths => {
let content = require(`${dir}/${path.join(paths)}`);
assignment(content);
});
}
// 将模块的数据加载进 moduleList 对象中
function assignment(obj) {
if(!Object.keys(obj).length) return ;
let arr = Object.keys(obj);
arr.forEach( key => {
moduleList[key] = obj[key];
})
}
module.exports = moduleList;
// index.js
import moduleList from '@/api';
import vue from 'vue';
vue.prototype.$moduleList = moduleList;
