使用契机
将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中。
