初识 require.context

require.context是webpack中，用来创建自己的（模块）上下文

webpack会在构建的时候解析代码中的require.context()

require.context函数接收三个参数：

1. 要搜索的文件夹目录
2. 是否还应该搜索它的子目录
3. 以及一个匹配文件的正则表达式

示例：

let requireServices = require.context(`@/domain`, false, /(\.\/(?:(?!index).)+)\.(ts|js)$/);

（创建了）一个包含了 domain文件夹（不包含子目录）下面的、所有文件名以 .js或。ts 结尾的、能被 require 请求到的文件的上下文。
通过打印, 可以看出返回的是一个函数，意思就是说，require.context模块导出（返回）一个（require）函数。
这个函数有三个属性：

1. resolve：是一个函数，它返回请求被解析后得到的模块 id
2. keys：也是一个函数，它返回一个数组，由所有可能被上下文模块处理的请求组成。
3. id：是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到

调用 requireServices .keys() 可以打印出./domain目录下所有domain文件集合

//globalDomainApi.js

let requireServices = require.context(`@/domain`, false, /(\.\/(?:(?!index).)+)\.(ts|js)$/);
let getAllService = function (self, req) {
    
    
    ((requireContext) => {
    
    
        const arr = requireContext.keys();
        (arr || []).forEach((fileName) => {
    
    
            let config = req(fileName);
            let name = fileName.replace(/^\.\//, '').replace(/\.\w+$/, '');
            self[name] = config;
        });
    })(req);
}

export const GlobalDomainApi = function () {
    
    
    let req = requireServices;
    let vm = {
    
    };
    getAllService(vm, req);
    let servicesStrategy = {
    
    };
    for(let key in vm){
    
    
        servicesStrategy[key] = function (){
    
    
            return vm[key].default;
        }
    }
    return function (serviceName) {
    
    
        return servicesStrategy[serviceName]();
    }
};

//main.js

import {
    
    GlobalDomainApi} from "./api/globalDomainApi";
Vue.prototype.$domainApi = GlobalDomainApi();

用法：

this.$domainApi("businessPlateApi")

目录结构如下：