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;