技術標籤：webpackjs

作用

	require.context()方法是webpack的一個api，主要功能是自動注入檔案，避
	免因專案龐大檔案過多，一個一個手動引入。舉個栗子

結構圖

上菜

/*  require.context(params1, params2, params3)
    引數1： 讀取檔案的路徑
    引數2： 是否遍歷檔案的子目錄
    引數3： 匹配檔案的正則
*/
const req = require.context('./', false, /\.js$/)
/*  列印req： 返回  引入檔案的方法
        對應webpack上下文
        var map = { 資料夾下匹配的檔案物件
            "./element.js": "./src/plugins/element.js",
            "./index.js": "./src/plugins/index.js"
        };
        function webpackContext(req) { 引入檔案的方法
            var id = webpackContextResolve(req);
            return __webpack_require__(id);
        }
        function webpackContextResolve(req) { 獲取檔案物件map的value
            if(!__webpack_require__.o(map, req)) {
                var e = new Error("Cannot find module '" + req + "'");
                e.code = 'MODULE_NOT_FOUND';
                throw e;
            }
            return map[req];
        }
        webpackContext.keys = function webpackContextKeys() {  獲取檔案物件map的key
            return Object.keys(map);
        };
        webpackContext.resolve = webpackContextResolve;
        module.exports = webpackContext;
        webpackContext.id = "./src/plugins sync \\.js$"; 
*/
 

const requireAll = requireContext => {
    let allFileName = requireContext.keys()
    let index = allFileName.indexOf('./index.js')
    allFileName.splice(index, 1)
    /*  將陣列allFileName的每一個元素全部執行一遍requireContext函式
        requireContext就是這個函式 會執行引入檔案的操作
        function webpackContext(req) {  
            var id = webpackContextResolve(req);
            return __webpack_require__(id);
        }  
    */
 

    return allFileName.map(requireContext)
}
requireAll(req)

下面拿請求地址做個演練

結構圖

上菜

// 當前目錄檔案自動注入
const req = require.context('./', false, /\.js$/)
let apiUrl = {} // 儲存所有api模組請求地址
const requireAll = requireContext => {
    const FILE_NAME = requireContext.keys()
    let index = FILE_NAME.indexOf('./api.js'
 
)
    FILE_NAME.splice(index, 1)
    FILE_NAME.map(requireContext).forEach( item => {
        apiUrl = {...apiUrl, ...item} // 合併所有請求路徑
    })
    return FILE_NAME.map(requireContext)
}
requireAll(req)
const API = apiUrl 
export default API

總結

	require.context()這個webpack的api，適合做js方法、規則，路由地址、
	請求地址、css檔案等等一系列需要大量引入檔案的情況，手動引入費時費
	力而且極其不雅，require.context()不但可以自動注入省事，而且讓程式碼
	看起來相當優雅