什么是“require.context"? [英] What is `require.context`?

查看:20
本文介绍了什么是“require.context"?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

Webpack 文档

<块引用>

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

太好了.什么是上下文"?这实际上有什么作用?

<块引用>

它允许您传入要搜索的目录,一个标志表示是否也应该搜索子目录,以及一个常规的匹配文件的表达式.

允许我搜索"?搜索我假设的文件,然后呢?这个函数最终做什么?有什么用?

解决方案

webpack 编译器的主要特性之一是递归解析所有模块,从条目开始,通过分析require()require.context()importimport() 表达式.

webpack 中上下文"的通常解释,在 Node.js 中类似,是一些用作解析模块路径的基础的目录.例如,当前工作目录用作 webpack 的 默认上下文解析index.js入口模块的实际路径;请求 require.resolve('../../../foo.js') 的上下文是 __dirname.

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

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

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

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?

解决方案

One of the main features of webpack's compiler is to recursively parse all the modules, starting from the entries, to build a graph of all the module dependencies by analyzing require(), require.context(), import and import() expressions.

The usual interpretation of "context" in webpack, and similarly in Node.js, is some directory that is used as a base for resolving paths to modules. For example, the current working directory is used as the default context for webpack to resolve the actual path to the index.js entry module; the context for the request require.resolve('../../../foo.js') is __dirname.

require.context is a special feature supported by webpack's compiler that allows you to get all matching modules starting from some base directory. The intention is to tell webpack at compile time to transform that expression into a dynamic list of all the possible matching module requests that it can resolve, in turn adding them as build dependencies and allowing you to require them at runtime.

In short, you would use require.context in the exact same situation when in Node.js at runtime you would use globs to dynamically build a list of module paths to require. The return value is a callable object that behaves like require, whose keys contain the necessary module request data that can be passed to it as an argument to require the module.

There are several ways you can use it, but I think the two most common use cases are to either automagically require some well-known kind of modules (e.g. you just add some.test.js test module and in some module you use require.context to dynamically discover all the tests, thus not having to document and remember to do it manually every time you add a new test module) or to load static assets in the repository to emit files to the build output (new webpack users coming from other build tools are usually surprised that their images, fonts, audio files and other assets do not appear in the output unless they are required from some module).

这篇关于什么是“require.context"?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆