vue项目中require.context自动引入路由或vuex

require.context是什么

一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

引入路由例：

附上代码：

// 现用法：
let configArray = [];
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return; // 排除掉自己
  configArray = configArray.concat(files(key).default);
});
export default configArray;

参数分析：

require.context(directory, useSubdirectories, regExp)
// 例子
require.context('./test', false, /.test.js$/);
// （创建出）一个 context，其中文件来自 test 目录，request 以 .test.js 结尾。

* directory：要搜索的目录
* 是否搜索其子目录
* 匹配文件的正则表达式,一般是文件名

require.context函数执行后返回的是一个函数,并且这个函数有3个属性。 此导出函数有三个属性：

* resolve() 它返回请求被解析后得到的模块 id 
* keys() 它返回一个数组，由所有符合上下文模块处理的请求组成。 
* id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

store中需要引入很多modules/*.js, 也可以使用

附上代码：

// 现写法
const files = require.context('.', true, /\.module.js$/);
const modules = {};

files.keys().forEach((key) => {
  let temp = modules[key.replace(/(\.\/|\.module.js)/g, '')];
  if (!temp) { temp = {} } // 自己为undefined
  modules[key.replace(/(\.\/|\.module.js)/g, '')] = Object.assign(temp, files(key).default);
});
export default modules;