js require.context - Kaiqisan

大家好，都吃晚饭了吗？我是Kaiqisan,是一个已经走出社恐的一般生徒,下面讲的内容
只有在webpack才可以使用的方法，如果在node环境或者直接编写的话是行不通的，直接给你报错

它的格式如下

require.context(dir, useSubdirectories, filter)

第一个参数填写文件夹路径，注意，这里不能填写具体的文件，否则报错

第二个参数填写是否查找子路径的文件，为布尔值，如果选择是，如果这个文件夹下还有其他文件夹的话它也会进入子文件夹找出匹配的文件。（树查找）

第三个参数是过滤器，需要填入正则表达式代表文件名的匹配规则，一般通过文件扩展名来筛选文件

例

上图是我自己手搭的webpack的原生js项目，它由一个入口文件index.js和两个子文件组成 demo1.js demo2.js
然后入口文件要导入两个子文件的内容

/* demo.js */
export default {
    name: 'kitty'
}

/* demo2.js */
export default {
    name: 'kaiqisan'
}

/* index.js */
let a = require.context('./js', true, /\.js$/)
console.log()

在控制栏里面虽然没有直接返回给我们内容，只输出了一个function,

但这只是内容的一部分，双击代码这部分就可以进入源文件了，源文件里面才是奥秘，建议读懂

// 读取到的文件名和路径
var map = {
	"./demo.js": "./src/js/demo.js",
	"./demo2.js": "./src/js/demo2.js"
};


// 直接执行可获取相应具体文件的内容
function webpackContext(req) {
	var id = webpackContextResolve(req);
	return __webpack_require__(id);
}

function webpackContextResolve(req) {
	if(!__webpack_require__.o(map, req)) {
		var e = new Error("Cannot find module '" + req + "'");
		e.code = 'MODULE_NOT_FOUND';
		throw e;
	}
	return map[req];
}
webpackContext.keys = function webpackContextKeys() {
	return Object.keys(map); // 迭代map里面的内容，获取每一个键值
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext; // 输出
webpackContext.id = "./src/js sync recursive \\.js$";

我们可以看到这个方法最终输入了 webpackContext,它是一个函数。

然后我们来测试一下

测试keys函数

let a = require.context('./js', true, /\.js$/)

a.keys().forEach(item => {
    console.log(item);
})

输出为

./demo.js
./demo2.js

测试直接执行webpackContext

let a = require.context('./js', true, /\.js$/)

a.keys().forEach(item => {
    console.log(a(item));
})

输出为一个对象Module,这 default里面就是我们想要的文件内容

能获取到每一个文件的内容，那么我就不困了😜

接下来就是大家的个人发挥时间了，大家可以直接遍历也可以把迭代读取的内容整合到一个对象里面最后输出。

总结

这个方法非常好用，就算我们直接在对应文件夹里面新建多少文件，不管给文件取什么名，它都可以一个不漏读取到，
这大大减少了我们的开发负担，因为我们可以不用重复地写import导入语句，直接使用这个方法后封装一下直接解决文件导入问题!