什么是 `require.context`？

Question

Webpack 文档

你可以使用 require.context() 函数创建自己的上下文。

好的，什么是 "context"？这个函数实际上是做什么的？

它允许你传入一个要搜索的目录，一个指示是否应该搜索子目录的标志以及用于匹配文件的正则表达式。

让我搜索？我想是搜索文件吧，然后呢？这个函数最终是做什么用的？

- GN.

---

https://robkendal.co.uk/blog/use-webpack-and-require-context-to-load-html-files - doğukan

Answer 1

webpack编译器的主要特点之一是递归解析所有模块，从入口开始分析require()、require.context()、import和import()表达式，构建所有模块依赖关系图。

在webpack中，“上下文”（context）的通常解释，以及类似地在Node.js中，是用作解析模块路径的基础的某个目录。例如，当前工作目录被用作webpack的默认上下文来解析实际路径到index.js入口模块; 请求require.resolve('../../../foo.js')的上下文是__dirname。 require.context 是webpack编译器支持的一个特殊功能，允许您从某个基础目录开始获取所有匹配的模块。其意图是告诉webpack在编译时将该表达式转换为动态列表，其中包含它能够解析的所有可能匹配的模块请求，进而将它们添加为构建依赖项，并允许您在运行时请求它们。参考链接：require.context。简而言之，在Node.js运行时需要使用通配符动态构建模块路径列表以进行要求的确切情况下，您将使用require.context。返回值是可调用对象，类似于require，其键包含必要的模块请求数据，可以将其作为参数传递给需要模块的函数。

有几种使用它的方法，但我认为最常见的两种用例是自动要求一些众所周知的模块（例如，您只需添加some.test.js测试模块，并在某个模块中使用require.context动态发现所有测试，从而不必手动记录和记住每次添加新测试模块时要这样做）或者加载存储库中的静态资产以将文件发送到生成输出（来自其他构建工具的新webpack用户通常会感到惊讶，除非它们从某个模块中请求，否则它们的图像、字体、音频文件和其他资产不会出现在输出中）。

- Filip Dupanović

---

我对require.context返回的内容有疑问。在我的工作中，我遇到了以下代码：const srcContext = require.context('../src', true, /.test.jsx?$/); srcContext.keys().forEach(srcContext); 这段代码具体是在做什么？ - Armando Júnior

@ArmandoJúnior：如上所述，假设返回的“srcContext”是一个执行动态“require（someModule）”的函数；每个“key”都是一个“module-specifier”。因此，forEach将调用dynamic-require（module-key0）; dynamic-require（module-key1）; ...最终告诉webpack要将由“require-context”标识的每个模块视为必需的。 - Jack Punt