工程化开发之require.context使用

作用

	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.default} // 合并所有请求路径
    })
    return FILE_NAME.map(requireContext)
}
requireAll(req)
export default apiUrl 

总结

	require.context()这个webpack的api，适合做js方法、规则，路由地址、
	请求地址、css文件等等一系列需要大量引入文件的情况，手动引入费时费
	力而且极其不雅，require.context()不但可以自动注入省事，而且让代码
	看起来相当优雅