使用require.context导入多个模块

使用契机

将API接口文件分模块存放后需要导入统一的入口文件再统一导出，然后在main.js中引用。看着分门别类的接口文件很舒服，但是文件一多，导入统一入口文件index.js就显得很繁琐。效果如下:

76da31964bce1579.png
44989b9516d6df61.png
e18f9f04cb0884cf.png

说实话，这个看着越看越反人类。所以决定用更简洁的require.context来处理这个问题。

require.context

require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

require.context函数接受三个参数

• directory {String} -读取文件的路径

• useSubdirectories {Boolean} -是否遍历文件的子目录

• regExp {RegExp} -匹配文件的正则

webpack官网给出的例子是这样的:

require.context('./test', false, /.test.js$/)

开始使用

首先根据需要让require.context遍历/src/api目录。遍历的过程中肯定会把index.js也遍历进去，因为不想之后来处理遍历后的结果，所以先粗暴的用名称区分。

我将以前的模块名.js改成为了模块名.api.js。

f57afe8c22ddd303.png

接着开始编写一个导入函数来处理require.context返回的结果。

// importAllModule.js

/**
 * @description 批量导入API
 * @param {Object} context 上下文对象
 * @param {RegExp} reg 匹配规则
 * @returns {Object} 对象
 */
function importAllModule(context, reg) {
    const map = {}
    let tmp = {}
    for (let key of context.keys()) {
        const keyArr = key.split('/')
        keyArr.shift()
        map[keyArr.join('.').replace(reg, '')] = context(key).default
    }
    for (let key in map) {
        tmp = {
            ...tmp,
            ...map[key]
        }
    }
    return tmp
}

export default importAllModule 

接着在index.js中导入importAllModule.js并调用导入函数。

// index.js  

import importAllModule from '../common/js/importAllModule'

const api = importAllModule(require.context('api', true, /\.api.js$/), /\.api.js$/g)

export default api

结语

经过require.context的改造，大大解放了生产力。首先是index.js变得更加的简洁和可维护。其次，只要按格式编写API文件的文件名，就会被require.context遍历到并导入到index.js中。