require.context の使用法の概要 (例付き)

この記事では、require.context の使い方を (例とともに) 紹介します。一定の参考価値があります。困っている友人は参考にしてください。お役に立てれば幸いです。

原因: webpack の管理機能が突然使用されるようになったのはなぜですか?

プロジェクトの特定のページでは、N 枚のデモ画像を紹介する必要があります。つまり、リソースのバッチ インポート: 10 個を超える画像リソースをインポートする場合は、次のように 10 個のインポート コードを記述する必要があります: import XXX from 'relative/path/assets/imgs/xxx';, それ以上の画像リソースがある場合は、静的リソース 導入する必要がありますか?ここで、require.context が役に立ちます。

Documentation

公式ドキュメントの紹介が先にありますが、利用姿勢を理解するためにこれを見てみるのも良いでしょう。

Chestnut を見てみましょう

早速、上記のシナリオのコードを見てみましょう。

このシナリオでは、指定したフォルダーの下にあるすべての WebP 形式の画像をインポートし、demo1 をクリックすると、demo1 の下に x 枚のケース画像を表示し、demoX ケース図をクリックすると、demoX の下に x 枚の画像を表示する必要があります。

    // 通过require.context的方式引入指定的路径下匹配到的模块引用
    const demoImgsContext = require.context('@src/assets/imgs/demo', false, /\.webp$/);
    ...
    // 使用姿势
    trigger(type) {
        this.demoImgs = Arry.from({length: config.type}, (key, value) => value + 1)
            .map(index => demoImgsContext(`./${type}_demo${index}.webp`));
    }

1 つの例から推測するシーンはまだ必要ですか?
たとえば、vuex では複数のモジュール ストアが導入されています。この方法も使えます。

    // 添加module文件是，文件命请按照module_XXX的方式命名
    // 自动引入module文件夹下的js文件
    const mutationContext = require.context('./module', false, /.*\.js/);
    const modules = mutationContext.keys().reduce((prev, cur) => {
        // 排除module_root文件
        const matches = cur.match(/module_(?!.*root)(\w+)\.js/);
        const key = matches && matches[1];
        key && (prev[key] = mutationContext(cur).default);
        return prev;
    }, {});

次に、require.context がリソースを動的に導入する方法を見てみましょう。

パッケージ化された dist ディレクトリを見て、静的画像のケースのチャンク部分のコードがどのようなものであるかを確認してください。

trigger メソッド内でモジュールのリソースを参照するコードは次のとおりで、y メソッドが呼び出され、リソースのパスが渡されます。

    map(function (e) {
        return y("./".concat(t, "_demo").concat(e, ".webp"))
    })

y メソッドとは何ですか?手がかりに従って、パッケージ化されたコードを調べ続けます。

   y = a("ae36");

y メソッドは特定のモジュールのエクスポートです。この ID でモジュール コードを引き続き表示します:

ae36: function (t, e, a) {
      // 此处是一个map映射，key值和真正的资源id的映射
      var i = {
        "./a_module_demo1.webp": "6085",
        "./a_module_demo2.webp": "fd3b",
        "./b_module_demo1.webp": "cbf6",
        "./b_module_demo2.webp": "220e",
        "./c_module_demo1.webp": "273e",
        "./c_module_demo2.webp": "5a5e",
        "./d_module_demo1.webp": "75b0",
        "./d_module_demo2.webp": "2d3e"
      };
      // 此处根据module的id值，真正require一个资源
      function r(t) {
        var e = o(t);
        return a(e)
      }
      
      function o(t) {
        var e = i[t];
        if (!(e + 1)) {
          var a = new Error("Cannot find module '" + t + "'");
          throw a.code = "MODULE_NOT_FOUND", a
        }
        return e
      }
      r.keys = function () {
        return Object.keys(i)
      }, r.resolve = o, t.exports = r, r.id = "ae36"
    },

"6085"、"fd3b" およびその他のマップされた値の値を表示できます。は実際のリソース ID 値であり、対応するモジュール マッピングは次のとおりです:

6085: function (t, e) {
      t.exports =
        "//${你配置的项目publicPath}/img/1_module_demo1.ed6db768.webp"
    },

ユーザーがトリガー メソッドをトリガーすると、タイプとインデックスで指定された値に基づいて、モジュール リソース参照require.context に保存されているリソース モジュールは、キー値に基づいて実際のリソース参照を見つけます。リソース モジュール、require、ブラウザーは、対応するリソースをダウンロードするのに役立ち、バッチで導入された後にオンデマンドでロードするというアイデアを実現します。

この記事はここで終了しています。その他のエキサイティングなコンテンツについては、PHP 中国語 Web サイトの JavaScript ビデオ チュートリアル 列に注目してください。

以上がrequire.context の使用法の概要 (例付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。