1. ホーム
  2. webpack

[解決済み] require.context`とは何ですか?

2022-03-17 21:28:40

質問

Webpack ドキュメント

<ブロッククオート

require.context()関数で独自のコンテキストを作成することができます。

素晴らしい。context"とは何ですか?これは実際に何をするものなのでしょうか?

<ブロッククオート

検索するディレクトリ、それを示すフラグを渡すことができます。 サブディレクトリも検索するかどうか、そして正規の という表現でファイルを照合します。

検索ができるようになりますか?ファイルを検索するのだと思いますが、それからどうするのですか?この機能は最終的に何をするのでしょうか?何のために使うのですか?

どのように解決するのですか?

webpack のコンパイラの主な機能のひとつは、すべてのモジュールを再帰的に解析し、エントリから始めて、すべてのモジュールの依存関係のグラフを構築することである。 require() , require.context() , importimport() という表現があります。

webpackやNode.jsにおけるcontext"の通常の解釈は、モジュールへのパスを解決するためのベースとして使用されるいくつかのディレクトリのことです。例えば、現在の作業ディレクトリは、モジュールへのパスを解決するためのベースとして使用されます。 デフォルトコンテキスト への実際のパスを解決するために、webpack が使用します。 index.js エントリーモジュール、リクエストのコンテキストは require.resolve('../../../foo.js')__dirname .

require.context は webpack のコンパイラがサポートする特別な機能で、あるベースディレクトリから始まるすべてのマッチするモジュールを取得することができます。この意図は、コンパイル時に webpack にこの式を、解決可能なすべてのマッチングモジュール要求の動的なリストに変換するよう指示することです。

要するに require.context は、Node.js の実行時に glob を使って動的に require するモジュールパスのリストを作成するのと全く同じ状況です。戻り値は require のように振る舞う呼び出し可能なオブジェクトで、そのキーにはモジュールを require するための引数として渡すことができる、必要なモジュールリクエストデータが含まれています。

使い方はいくつかありますが、最も一般的な使用例は、よく知られた種類のモジュールを自動的に要求する(例えば、単に some.test.js テストモジュールで、あるモジュールで require.context を使用して、すべてのテストを動的に検出します。したがって、新しいテストモジュールを追加するたびに手動でドキュメントを作成し、それを覚えておく必要はありません)または、リポジトリ内の静的資産をロードしてビルド出力にファイルを出力します(他のビルドツールから来た新しいwebpackユーザーは通常、画像、フォント、オーディオファイルおよびその他の資産が、何らかのモジュールから必要とされない限り出力に現れないことに驚かれるでしょう)。