require.context使用方法

require.context是什麼webpack

 

context的定義:web

 

context:  is some directory that is used as a base for resolving paths to modules. 數組

 

 

 

 

 

 

 

https://webpack.js.org/guides/dependency-management/ide

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

( 由於webpack對代碼進行編譯,而不是執行代碼,函數

 因此你用了name這個變量,並不能被執行到,被webpack發現這裏面是一個表達式了,ui

而後就會建立一個contextspa

 

 

 

 

 

 

 

 

 

webpack可以支持動態地require,但會致使全部可能用到的模塊都包含在bundle中3d

 

 

 

 

 

 

 

 

Request,值的是require表達式中間的那個值的部分對象

 

 

 

 

 

The syntax is as follows:blog

 

require.context(directory, useSubdirectories = false, regExp = /^\.\//)

Examples:

require.context("./test", false, /\.test\.js$/);

// a context with files from the test directory that can be required with a request endings with `.test.js`.

require.context("../", true, /\.stories\.js$/);

// a context with all files in the parent folder and descending folders ending wit...

 

 

 

 

 

 

 

 

 

require.context返回一個函數:

 

或者下面的寫法:

 

 

 

 

 

 

該函數對象有三個屬性

 

一個 context module 會導出一個(require)函數,此函數能夠接收一個參數:request。

此導出函數有三個屬性:resolve, keys, id。

  • resolve 是一個函數,它返回 request 被解析後獲得的模塊 id。
  • keys 也是一個函數,它返回一個數組,由全部可能被此 context module 處理的請求(譯者注:參考下面第二段代碼中的 key)組成。
  • id 是 context module 裏面所包含的模塊 id.  

 

 

 

 

map:

 

resolve:

 

keys:

 

 id:

 

 

 

 

用法:

 

解析:

let req = require.context...

req是返回的函數對象,這個對象能被調用(由於是函數對象) ,就是一個require函數..

這個對象也有三個屬性resolve,keys,id...

 

用上面的方法能夠將目錄下的全部文件一次性處理,引入,不用一個一個去寫require引入。

相關文章
相關標籤/搜索