[解決済み] require.context`とは何ですか?
質問
<ブロッククオートrequire.context()関数で独自のコンテキストを作成することができます。
素晴らしい。context"とは何ですか?これは実際に何をするものなのでしょうか?
<ブロッククオート検索するディレクトリ、それを示すフラグを渡すことができます。 サブディレクトリも検索するかどうか、そして正規の という表現でファイルを照合します。
検索ができるようになりますか?ファイルを検索するのだと思いますが、それからどうするのですか?この機能は最終的に何をするのでしょうか?何のために使うのですか?
どのように解決するのですか?
webpack のコンパイラの主な機能のひとつは、すべてのモジュールを再帰的に解析し、エントリから始めて、すべてのモジュールの依存関係のグラフを構築することである。
require()
,
require.context()
,
import
と
import()
という表現があります。
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ユーザーは通常、画像、フォント、オーディオファイルおよびその他の資産が、何らかのモジュールから必要とされない限り出力に現れないことに驚かれるでしょう)。
関連
-
[解決済み] Vue.jsのready()メソッドがvueコンポーネントで呼び出されない
-
[解決済み] bazel と webpack の統合
-
Unexpected token punc ":", expected punc "," のようなUglifyJsエラーの解決法
-
webpackでパッキングする際、モジュールが見つかりません。
-
[解決済み] Webpack - CopyWebpackPluginを使用してソースから公開ファイルへファイルをコピーする
-
[解決済み] require.context`とは何ですか?
-
webpack:error 改行記号が 'LF' であることを期待したが、'CRLF' 改行記号が見つかった。
-
[解決済み】Webpackのスタイルローダーとcssローダーの比較
-
[解決済み】webpack.config.jsでES6を使用するにはどうすればいいですか?
-
[解決済み] The code generator has deoptimised styling of [some file] as it exceed of max of "100KB"" とはどういう意味ですか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Webpack: 「ケーシングが異なるだけの名前のモジュールが複数存在する」しかし参照されるモジュールは同一である
-
[解決済み】モジュール 'webpack/bin/config-yargs' が見つかりません。
-
[解決済み】「import」「export」がトップレベルにしか表示されない場合がある。
-
[解決済み] モジュール 'webpack/bin/config-yargs' が見当たりません。
-
未定義のプロパティ 'properties' を読み取ることができません。
-
Webpackの "Invalid Host Header "を解決する。
-
copy-webpack-pluginの有用性・活用について
-
webpack - 定番で便利なプラグイン copy-webpack-plugin webpack用コピーリソースプラグイン
-
[解決済み] Webpack - CopyWebpackPluginを使用してソースから公開ファイルへファイルをコピーする
-
[解決済み] Webpack - CopyWebpackPluginを使用してソースから公開ファイルへファイルをコピーする