vue之require.context
阿新 • • 發佈:2019-02-18
初識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官方示例基礎元件的自動化全域性註冊