什么是`require.context`？

Posted 2023-03-15

【中文标题】什么是`require.context`？

【英文标题】：What is `require.context`?

【发布时间】：2019-01-06 06:26:21

【问题描述】：

Webpack Docs

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

太好了。什么是“上下文”？这实际上是做什么的？

它允许你传入一个目录进行搜索，一个标志表示 是否也应该搜索子目录，以及常规 匹配文件的表达式。

允许我“搜索”吗？搜索我假设的文件，然后呢？这个函数最终会做什么？它是干什么用的？

【问题讨论】：

robkendal.co.uk/blog/…

【参考方案1】：

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

webpack 中“上下文”的通常解释和 Node.js 中的类似，是一些用作解析模块路径的基础的目录。例如，当前工作目录作为default context为webpack解析到index.js入口模块的实际路径；请求require.resolve('../../../foo.js') 的上下文是__dirname。

require.context 是 webpack 编译器支持的一项特殊功能，它允许您从某个基本目录开始获取所有匹配的模块。目的是在编译时告诉 webpack 将该表达式转换为它可以解析的所有可能匹配模块请求的动态列表，然后将它们添加为构建依赖项并允许您在运行时要求它们。

简而言之，您将在完全相同的情况下使用require.context，而在运行时在 Node.js 中您将使用 glob 动态构建需要的模块路径列表。返回值是一个行为类似于 require 的可调用对象，其键包含必要的模块请求数据，这些数据可以作为参数传递给它以要求模块。

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