Einführung in die Verwendung von require.context (mit Beispielen)

Dieser Artikel bietet Ihnen eine Einführung in die Verwendung von require.context (mit Beispielen). Ich hoffe, dass er für Freunde in Not hilfreich ist.

Ursache: Warum wird plötzlich die Verwaltungsfunktion von Webpack verwendet?

Auf einer bestimmten Seite des Projekts müssen N Demobilder vorgestellt werden. Das heißt, Batch-Einführung von Ressourcen: Wenn Sie mehr als 10 Bildressourcen einführen möchten, müssen Sie mehr als 10 folgende Einführungscodes schreiben: import XXX from 'relative/path/assets/imgs/xxx';, falls vorhanden mehr Müssen statische Ressourcen eingeführt werden? Hier bietet sich require.context an.

Dokumentation

Hier finden Sie zunächst die Einführung des offiziellen Dokuments. Sie können es sich ansehen, um die Nutzungssituation zu verstehen.

Hier ist eine Kastanie

Schauen wir uns ohne weitere Umschweife den Code für das obige Szenario an.

Das Szenario erfordert, dass wir alle Bilder im Webp-Format in einen bestimmten Ordner importieren, x Fallbilder unter demo1 anzeigen, wenn wir auf demo1 klicken, und x Bilder unter demoX anzeigen, wenn wir auf das demoX-Falldiagramm klicken.

    // 通过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`));
    }

Besteht noch Bedarf an Szenen, die Rückschlüsse auf ein Beispiel ziehen?
Vuex führt beispielsweise mehrere Modulspeicher ein. Diese Methode kann auch verwendet werden.

    // 添加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;
    }, {});

Als nächstes schauen wir uns an, wie require.context Ressourcen dynamisch einführt.

Sehen Sie sich das gepackte dist-Verzeichnis an, um zu sehen, wie der Code für den Chunk-Teil unseres statischen Bildfalls aussieht.

Der Code, der in der Trigger-Methode auf Modulressourcen verweist, lautet wie folgt: Die y-Methode wird aufgerufen und der Pfad einer Ressource übergeben.

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

Was ist die y-Methode? Folgen Sie den Hinweisen und schauen Sie sich weiterhin den verpackten Code an. Die

   y = a("ae36");

y-Methode ist der Export eines bestimmten Moduls. Sehen Sie sich weiterhin den Modulcode unter dieser ID an:

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" und andere zugeordnete Wertewerte Man kann sich vorstellen, dass es sich um den tatsächlichen Ressourcen-ID-Wert handelt und die entsprechende Modulzuordnung wie folgt lautet:

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

Wenn der Benutzer die Triggermethode auslöst, wird die Modulressource basierend auf den durch Typ und Index angegebenen Werten angezeigt Die in require.context gespeicherte Referenz findet den tatsächlichen Wert basierend auf dem Schlüsselwert des Ressourcenmoduls, und der Browser hilft uns beim Herunterladen der entsprechenden Ressourcen, wodurch die Idee des Ladens bei Bedarf nach der Batch-Einführung erreicht wird.

Dieser Artikel ist hier zu Ende. Weitere spannende Inhalte finden Sie in der Spalte JavaScript-Video-Tutorial auf der chinesischen PHP-Website!

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von require.context (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!