What is `require.context`?

Webpack Docs

You can create your own context with the require.context() function.

Great. What is a "context"? What does this actually do?

It allows you to pass in a directory to search, a flag indicating whether subdirectories should be searched too, and a regular expression to match files against.

Allows me to "search"? Search for files I'm assuming, and then what? What does this function ultimately do? What is it used for?

88161 次浏览

Webpack 编译器的主要特性之一是递归地解析所有模块,从条目开始,通过分析 require()require.context()importimport()表达式来构建所有模块依赖关系的图。

Webpack 和 Node.js 中对“ context”的通常解释是,一些目录用作解析模块路径的基础。例如,当前的工作目录被用作 webpack 的 默认上下文来解析到 index.js输入模块的实际路径,而请求 require.resolve('../../../foo.js')的上下文是 __dirname

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

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

有几种方法可以使用它,但我认为最常见的两种用例是要么自动需要一些众所周知的模块(例如,你只需要添加 some.test.js测试模块,在一些模块中你使用 require.context来动态发现所有的测试,因此不必每次添加一个新的测试模块时都记得手动编写文档) ,要么在存储库中加载静态资产,将文件发送到构建输出(来自其他构建工具的新 webpack 用户通常会感到惊讶,他们的图像、字体、音频文件和其他资产没有出现在输出中,除非它们是来自某个模。