require.context 实现模块批量导入

前言：这个方法见了三四次了，一直没深入研究稀里糊涂的。这次又给我遇到了，事情到了解决的时候了。🤭

一、基本语法

这个方法属于 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' */
)

此方法有的参数参数：

  1. 要查询的目录
  2. 否要查询子孙目录 true
  3. 文件匹配规则，支持正则表达式
  4. 查询模式，默认同步，也可异步使用 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 方法会返回一个函数函数有三个附带属性：

  1. id 属性，返回的是一个字符串，记录一些详细信息

  2. resolve 接受一个参数 request 的函数，request 为 当前文件夹下面匹配文件的相对路径名，返回这个匹配文件相对于整个工程的相对路径。

  3. 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 方法的两个优点：

  1. 支持批量引入文件，新建文件会自动被加载
  2. 能够得到模块里面具体暴露出来的方法或变量

就这两个优点用在 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 参数里。

上面方法使用的不是默认导出，如果你想在 xxxxReducer.js 文件里面使用默认导出，例如 homeReducer.js 文件：

// 不同的纯函数只需修改homeReduce的home字符
export default function homeReducer(state={},action) {
    return state;
}

// 一下作为干扰
export function main(){

}

export const count = 10;

这时候只需要改写下 index.js 文件，如下：

const { basename } = require("path");
const context = require.context("./",true,/Reducer\.js$/);

const combineObj = {};
context.keys().map((item,index)=>{
    const moduleName = basename(item,".js");
    combineObj[moduleName] = context(item)["default"];
});

console.info(combineObj);

2020年5月6日02点30分

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 194,457评论 5赞 459
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 81,837评论 2赞 371
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 141,696评论 0赞 319
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 52,183评论 1赞 263
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 61,057评论 4赞 355
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 46,105评论 1赞 272
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 36,520评论 3赞 381
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 35,211评论 0赞 253
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 39,482评论 1赞 290
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,574评论 2赞 309
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,353评论 1赞 326
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 32,213评论 3赞 312
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 37,576评论 3赞 298
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,897评论 0赞 17
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,174评论 1赞 250
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 41,489评论 2赞 341
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 40,683评论 2赞 335