前言：这个方法见了三四次了，一直没深入研究稀里糊涂的。这次又给我遇到了，事情到了解决的时候了。🤭
一、基本语法
这个方法属于 webpack 内置方法，官网链接：require.context 参数说明：
require.context(
directory: String,
includeSubdirs: Boolean /* optional, default true */,
filter: RegExp /* optional, default /^\.\/.*$/, any file */,
mode: String /* optional, 'sync' | 'eager' | 'weak' | 'lazy' | 'lazy-once', default 'sync' */
)
此方法有的参数参数：
- 要查询的目录
- 否要查询子孙目录 true
- 文件匹配规则，支持正则表达式
- 查询模式，默认同步，也可异步使用 then，一般用不到这个参数。
二、使用
项目目录：
├─js
| ├─index.js
| ├─a.js
│ └─reducer
| ├─c.js
| ├─fei.txt
| └─d.js
├─index.html
├─webpack.config.js
└─package.json
先来配置下 webpack 的环境，安装依赖：
npm install --save-dev webpack webpack-cli webpack-dev-server
感叹一下我学 webpack 的时候才是 4.35 版本现在都快出 5.0 版本了。世界变得真快。。。
配置下 webpack.config.js 文件：
const path = require("path");
module.exports = {
mode:"development",
entry:path.resolve(__dirname,"./js/index.js"),
output:{
publicPath:"/",
filename:"bundle.js"
},
stats: "errors-only"
}
在去配置下 package.json 文件，scripts 字段增加如下内容：
"scripts": {
"dev": "webpack-dev-server"
},
index.html 文件内容为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>require.context学习</title>
</head>
<body>
<script src="./bundle.js"></script>
</body>
</html>
终端输入命令：npm run dev，打开 http://localhost:8080/ 链接，即可开始调试。
index.js 文件：
const context = require.context("./",true,/\.js$/);
//比较常用的就是这三个参数
递归查询当前目录下所有后缀名为js的文件。require.context 方法会返回一个函数函数有三个附带属性：
-
id 属性，返回的是一个字符串，记录一些详细信息
-
resolve 接受一个参数 request 的函数，request 为 当前文件夹下面匹配文件的相对路径名，返回这个匹配文件相对于整个工程的相对路径。
-
keys 函数 ，返回匹配成功模块的名字组成的数组
const context = require.context("./",true,/\.js$/);
const arr = context.keys();
console.log(context.id);
//匹配结果./js sync recursive \.js$
//参数分为三段，一、index.js当前路径，二、是否递归，三、正则匹配规则
//context 关闭递归查找recursive 会变成 sync
console.log(context.resolve(arr[0]));
//第一个js文件的相对路径./js/b.js
console.log(context.keys());
//所有成功匹配的js文件数组["./a.js", "./index.js", "./reducer/c.js", "./reducer/d.js"]
这三个都是作为函数的属性(注意是作为函数的属性，函数也是对象，有对应的属性)。
最后重点来了：
context("./index.js")的结果是esmodule，可以认为等于
import * as a from "./a.js";
就是通过 context 方法来引入模块，本身和 import 引入模块没啥不同，好处：就是相对 import 一个个的手动引入模块，我们能够通过 keys() 方法自动拿到所有的路径名，然后通过循环数组批量引入。
const res = context.keys().map(context);
const res = context.keys().map(item=>context(item));
//上面两种写法等同
console.log(res);
新返回的 res 数组里面存放了引入的模块。结果如图：
数组后三项为空是因为对应的 JS 文件里什么也没写，数组第一项里面有内容，最重要的一个字段是 default，这个因为 a.js 文件的内容为：
export default class A {
}
又因为模块说到底也是一个对象，我们要拿到 A 类，只需要这样写就 OK 了：
res[0]["default"]
现在来总结下 require.context 方法的两个优点：
- 支持批量引入文件，新建文件会自动被加载
- 能够得到模块里面具体暴露出来的方法或变量
就这两个优点用在 Vue 或 React 状态管理容器合并的时候是再好不过了，在具体就是可以用在 Vuex 的 modules:{} 对象里，react-redux 的 combineReducers() 函数里面。
三、default 是如何产生的
最后我们看看新返回数组 res[0] 的第一项模块里面的 default 是怎么产生的。我们增加下 a.js 文件的内容：
export default class A {
}
export function main(){
}
export const count = 10;
然后在 index.js 这样使用：
import * as A from "./a";
console.dir(A);
在 index.js 文件里面这样：
const res = context.keys().map(context);
console.dir(res[0]);
结果和 * as 方法得到的结果是一样的。毕竟都是模块。
四、实战一下
我们实战一下在 react-redux 中 combineReducers() 函数自动化。即只增加 reducer （纯函数）文件，就能通过 combineReducers() 自动合并。
先改下文件树对应的文件名后如下：
├─js
| ├─index.js
| ├─homeReducer.js
| ├─new
| | ├─data.js.js
| | ├─data.js文件可能是数据，干扰自动读取.txt
| | └─newReducer.js
| ├─army
| | └─armyReducer.js
├─index.html
├─webpack.config.js
└─package.json
homeReducer.js 文件内容：
// 不同的纯函数只需修改homeReduce的home字符
export function homeReducer(state={},action) {
return state;
}
// 一下作为干扰
export function main(){
}
export const count = 10;
xxxxReducer.js 里都是纯函数。
index.js 里面有 combineReducers() 函数
const context = require.context("./",true,/Reducer\.js$/);
const combineObj = {};
const pathArr = context.keys();
for(let i = 0;i < pathArr.length;i++){
const module = context(pathArr[i]);
for(let k in module){
if(k.includes("Reducer")){
combineObj[k] = module[k];
}
}
}
console.info(combineObj);
// {armyReducer: ƒ, homeReducer: ƒ, newReducer: ƒ}
最后只需要：combineReducers(combineObj) 就行了，这时可以放心无忧的新建 xxxxReducer.js 文件，index.js 文件会自动合并到 combineReducers 参数里。
2020年5月6日02点30分
网友评论