關於require.context的嘗試

原由

爲何會忽然用到webpack這個管理特性呢？

項目某個頁面須要引入N張demo圖片。即資源的批量引入：若是要引入10+個以上的圖片資源，就須要寫10+個以下的引入代碼：import XXX from 'relative/path/assets/imgs/xxx';，那若是再多一點的靜態資源須要引入呢？這時候require.context就派上了用場。

文檔

官方文檔的介紹先放在這裏，可小覷一下，瞭解使用姿式。

栗子🌰_🌰來一個

話很少說，針對上面的場景，咱們上一下代碼吧。

場景須要咱們引入某個指定文件夾下的全部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`));
    }

觸類旁通的場景還有須要的麼？
好比vuex引入多個module的store。也可使用這個方法。

// 添加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目錄下，咱們的靜態圖片案例chunk這個部分的代碼是啥樣的。

trigger方法中引用模塊資源的代碼以下，對y方法進行調用，傳入了一個資源的路徑。

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

那y方法是什麼呢？順藤摸瓜，繼續看下打包後的代碼。

y = a("ae36");

y方法是某個模塊的export，繼續查看這個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"等map映射的value值可想而知，是真正的資源id值，其對應的模塊映射以下：

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

當用戶觸發trigger方法時，根據type和index指定的值，require.context存儲的模塊資源引用會根據key值找到真正的資源模塊，進行require，瀏覽器會幫助咱們下載相應的資源，作到了批量引入後按需加載的想法。

手癢的同窗能夠磨刀霍霍試試了～