Introduction à l'utilisation de require.context (avec exemples)

Cet article vous apporte une introduction à l'utilisation de require.context (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Cause : Pourquoi la fonctionnalité de gestion de webpack est-elle soudainement utilisée ?

Une certaine page du projet doit introduire N images de démonstration. C'est-à-dire une introduction par lots de ressources : si vous souhaitez introduire plus de 10 ressources d'images, vous devez écrire plus de 10 codes d'introduction suivants : importer XXX depuis 'relative/path/assets/imgs/xxx' ;, puis s'il y en a plus Faut-il introduire des ressources statiques ? C'est là que require.context s'avère utile.

Documentation

L'introduction du document officiel est ici en premier, vous pouvez y jeter un œil pour comprendre la posture d'utilisation.

Voici une châtaigne

Sans plus tard, regardons le code du scénario ci-dessus.

Le scénario nous oblige à importer toutes les images au format Webp dans un dossier spécifié, à afficher x images de cas sous demo1 en cliquant sur demo1 et à afficher x images sous demoX en cliquant sur le diagramme de cas demoX.

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

Est-il encore nécessaire de créer des scènes qui tirent des conclusions à partir d'un exemple ?
Par exemple, vuex introduit plusieurs magasins de modules. Cette méthode peut également être utilisée.

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

Ensuite, voyons comment require.context introduit dynamiquement les ressources ?

Regardez le répertoire dist emballé pour voir à quoi ressemble le code de la partie fragmentée de notre cas d'image statique.

Le code qui référence les ressources du module dans la méthode trigger est le suivant. La méthode y est appelée et le chemin d'une ressource est transmis.

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

Quelle est la méthode y ? Suivez les indices et continuez à regarder le code emballé.

   y = a("ae36");

y méthode est l'exportation d'un certain module. Continuez à afficher le code du module sous cet identifiant :

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" et autre valeur mappée sur la carte. les valeurs peuvent être Comme vous pouvez l'imaginer, il s'agit de la véritable valeur de l'identifiant de ressource, et son mappage de module correspondant est le suivant :

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

Lorsque l'utilisateur déclenche la méthode de déclenchement, en fonction des valeurs spécifié par type et index, la référence de ressource du module stockée dans require.context Le module de ressource réel sera trouvé en fonction de la valeur clé et requise. Le navigateur nous aidera à télécharger les ressources correspondantes, réalisant ainsi l'idée de chargement à la demande après. introduction par lots.

Cet article est terminé ici. Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo JavaScript du site Web PHP chinois !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!