Vue（十二）：js模块化引用 - require.context

require.context

// directory: 要查找的文件路径
// useSubdirectories: 是否查找子目录
// regExp: 要匹配文件的正则
require.context(directory, useSubdirectories, regExp)

目录结构

在Vue项目中的使用

// src/assets/api/index.js
import Vue from "vue";

/**
 * 多层级的对象合并
 * @param target   目标对象(需要合并到的对象)
 * @param source   资源(拥有的对象)
 * @returns {target} 合并后的对象
 */
function assignObj(target,) {
    if (typeof (target) !== 'object' || typeof (source) !== 'object') {
        return source;
    }
    for (let key in source) {
        target[key] = assignObj(target[key], source[key]);
    }
    return target;
}

/**
 * 获取API
 * @type {{install(): *|{}}} Vue.use默认执行的方法
 */
const getApi = {
    install() {
        Vue.prototype.$api = {}
        const requireComponents = require.context('./modules', true, /\.js/)
        requireComponents.keys().forEach(file => {
            const mod = requireComponents(file);
            let fileName = file.replace(/\.\/|\.js/g, '');
            fileName = fileName.split('/').map(item => item.replace(/\./g, '_')).reverse().reduce((p,) => ({[c]: p}), mod.default);
            Vue.prototype.$api = assignObj(Vue.prototype.$api, fileName)
        })
        return Vue.prototype.$api
    }
}

export default getApi;

// main.js
import getApi from './assets/api'
Vue.use(getApi);

// src/assets/api/modules/A.js
export default {
    funA(data){return data}
}
// src/assets/api/modules/BB.js
export default {
    funBB(data){return data}
}
// src/assets/api/modules/A/A.js
export default {
    funAA(data){return data}
}
// src/assets/api/modules/A/B.js
export default {
    funAB(data){return data}
}
// src/assets/api/modules/A/B/C.js
export default {
    funABC(data){return data}
}
// src/assets/api/modules/A/B/D.js
export default {
    funABD(data){return data}
}
// src/assets/api/modules/A/B/E.js
export default {
    funABE(data){return data}
}

// 在组件中使用方法 this.$api[key]
// 当文件命名为A.B.js这种形式时，可以适应 A_B_C这种方式进行调用
console.log(this.$api); 
this.$api['A']['B'].funAB('Hello Lee');

⚠️注意

​​不允许出现在A文件夹下拥有A.js 并且 A文件夹所在目录下还存在一个A.js文件(并且内容为A(){}与A文件夹下的A.js文件重名方法)这种情况​​

​​以上这种情况会存在覆盖现象，如下目录结构会出现覆盖现象​​ /api/A/A.js /api/A.js(并且内容为A(){}) 此种情况(​​加粗部分的内容重复​​)不允许出现

​​在A文件夹所在目录下还存在一个A.js文件时，默认会将A.js中的对象属性或方法添加到A对象下​​​ 如拥有​​A文件夹​​,拥有​​A.js(含有一个funA(){})​​,最终整理后的效果会是​​{ A: { funA: () => {} } }​​ 如下图👇👇👇👇👇👇

返回结果展示