初識require.context

require.context是webpack中，用來建立自己的（模組）上下文

webpack會在構建的時候解析程式碼中的require.context()

require.context函式接收三個引數：

• 要搜尋的資料夾目錄
• 是否還應該搜尋它的子目錄
• 以及一個匹配檔案的正則表示式

// 語法
require.context(directory, useSubdirectories = false, regExp = /^\.\//);
// 示例
require.context('./test', false, /\.test\.js$/);
// （建立了）一個包含了 test 資料夾（不包含子目錄）下面的、所有檔名以 `.test.js` 結尾的、能被 require 請求到的檔案的上下文。
 

建立了一個包含了test資料夾（不包含子目錄）下面的所有檔名以'.test.js'結尾的能被require請求到的檔案上下文。

案例探索之繼續深究

我們來結合一個例子看一下：

const files = require.context('./assets/images', false, /\.png$/);

檔案目錄結構如下： 

好不好奇上面的files究竟是個什麼東西呢？有圖有真相，我們列印一下：

files可以看到，是一個函式，意思就是說，require.context模組匯出（返回）一個（require）函式。

這個函式有三個屬性（沒錯又是3個，別忘了，函式也是物件，所以也是有屬性的）：

• resolve：是一個函式，它返回請求被解析後得到的模組 id。
• keys：也是一個函式，它返回一個數組，由所有可能被上下文模組處理的請求組成。
• id：是上下文模組裡面所包含的模組 id. 它可能在你使用 module.hot.accept 的時候被用到

而且這個函式接收一個引數，一圖勝千言

這個展示了webpack解析後的形成結果。可以看到，firequire.context()這個函式返回上下文模組就上面。上面也展示了files函式的三個屬性是分別怎樣形成的，files對應的就是上面的webpackContext。

我們試著呼叫一下files.keys()

返回一個數組，從上面的keys方法就可以看到，合理對應當前結果。

vue中使用場景

在vue中，我們對於一些基礎元件，可以使用require.context()函式來建立上下文模組，然後進行全域性註冊元件，記住全域性註冊的行為必須在根 Vue 例項 (通過 new Vue) 建立之前發生。具體檢視vue官方示例基礎元件的自動化全域性註冊

參考文獻