使用 require.context 可以動態引入檔案。參考官方文件，但是文件中的表述不甚清晰，因此我整理了幾種用法和結果。

先新建一個測試目錄，安裝 webpack。目錄結構如下：

使用 require

完全使用變數 require(variable)

程式碼如下：

const filename = './dir/first-level.js';
const func = require(filename); // => Uncaught Error: Cannot find module "."

WARNING in ./index.js
2:13-30 Critical dependency: the request of a dependency is an expression
 

結果：無法正確拿到檔案中的內容。

部分使用變數 require(prefix + variable + suffix)

第一種：

const filename = './dir/first-level.js';
const func = require('' + filename); // => Error

結果：編譯超時或記憶體溢位導致 webpack 程序退出。

這時 webpack 嘗試引入 . 目錄下的所有檔案，由於 node_modules 存在，因此會引入非常多的檔案導致問題。

第二種：

const filename = '/first-level.js';
const func = require('./dir' + filename); // => Success
 

結果：成功獲取檔案中的內容。

這時 webpack 自動建立了一個 context，引入了所有路徑符合 ^\.\/dir.*$ 的檔案。生成的 bundle.js 中打包了所有的檔案的內容。如果目錄下存在非 js 檔案，則需要通過配置正確的 loader 來引入。

第三種：

const filename = 'r/first-level.js';
const func = require('./di' + filename); // => Success

結果：成功獲取檔案中的內容。

這時 webpack 自動建立了一個 context，引入了所有路徑符合 ^\.\/di.*$

第四種：

const filename = 'first-level';
const func = require('./dir/' + filename + '.js'); // => Success

結構：成功獲取檔案中的內容。

這時 webpack 自動建立了一個 context，引入了所有路徑符合 ./dir ^\.\/.*\.js$ 的檔案。生成的 bundle.js 中打包了所有的檔案的內容。

使用 require.context

在剛才的過程中，webpack 會建立一個 require.context，通過正則匹配到可能的檔案，全部引入。如果我們想自定義這個正則規則的話，可以自己寫一個 require.context。

第一種：

const context = require.context('./dir', true, /\.js$/);
const keys = context.keys(); // => ["./another-first-level.js", "./first-level.js", "./sub-dir/second-level.js"]
const filename = './first-level.js';
const func = context(); // => Success

結果：成功獲取檔案中的內容。

其中第一個引數表示相對的檔案目錄，第二個引數表示是否包括子目錄中的檔案，第三個引數表示引入的檔案匹配的正則表示式。

第二種：

const context = require.context('./dir', false, /\.js$/);
const keys = context.keys(); // => ["./another-first-level.js", "./first-level.js"]
const filename = './first-level.js';
const func = context(filename); // => Success

結果：成功獲取第一層目錄中的檔案內容，但是不能拿到子目錄中的檔案。

通過這個方式就可以解決引入不必要的 node_modules 中的檔案的問題。相關的程式碼如下：

var context = require.context('.', true, /^\.\/dir\/.*\.js$/);
console.log(context.keys());
const filename = './dir/first-level.js';
console.log(context(filename));

希望對大家理解動態 require 和 require.context 有幫助。

作者：vivaxy
連結：https://www.jianshu.com/p/78f7b19932cb
來源：簡書
簡書著作權歸作者所有，任何形式的轉載都請聯絡作者獲得授權並註明出處。