require.context

1、什么是 require.context

一个 webpack 的 api ，通过该函数可以获取一个上下文，从而实现工程自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）。

在前端工程中，如果一个文件夹中的模块需要频繁引用时可以使用该中方式一次性引入

2、使用

参数	类型	说明
dirname	String	需要读取模块的文件的所在目录
useSubdirectories	Boolean	是否遍历子目录
RegExp	RegExp	匹配的规则（正则表达式）

// 遍历获取 api 目录下所有的 js 文件（包括子目录）
require.context('@/api' , true, /(.js$)/);

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;