require.context批量引入文件

require.context 是什么

require.context 是由webpack內部實現，require.context在構建時，webpack 在代碼中進行解析。

當需要引入文件夾內多個文件模塊時，可以使用 require.context 自動化批量引入，而不用手動一條一條添加。

參數

require.context 函數接收三個參數

• String  讀取文件夾的路徑

• Boolean 是否遍歷文件夾的子目錄

• RegExp 匹配文件的正則

如何使用

用我實際開發的場景來做例子，現在文件夾內有多個 api 文件，我需要將這些組合起來

 api.js

//引入api文件夾下的api接口
let requireAll = require.context('./api', false, /\.js$/) //requireAll.keys()為文件名數組; requireAll(apiName)獲取文件暴露的內容
const apiArr = requireAll.keys().map(apiName=> requireAll(apiName).default || requireAll(apiName)) //組合接口
let api = apiArr.reduce((prev,curr)=> Object.assign(prev,curr), {}) export default api

ruquireAllApi(apiName).default 獲取的是Es6規范暴露的內容（如：export default）

ruquireAllApi(apiName) 獲取的是CommonJs規范暴露的內容(如：module.exports)