前端工程自动化1

84 阅读1分钟
  • require.context函数接受三个参数
  1. directory {String} -读取文件的路径
  2. useSubdirectories {Boolean} -是否遍历文件的子目录
  3. regExp {RegExp} -匹配文件的正则

image.png

  • require.context返回的是一个函数,并且这个函数具备有三个属性

    1.files.keys() 返回的是一个由匹配文件的文件名组成的数组 image.png

1645424107(1).png

2.files.id 返回了匹配的文件夹的相对于工程的相对路径,是否遍历子目录,匹配正则组成的字符串

1645424337(1).png

1645424357(1).png

3.files.resolve(files.resolve(files.keys()[0])) 对于resolve方法可以看到它是一个函数接受req参数,经过实践我发现这个req参数的值是keys方法返回的数组的元素,接着我们传入其中一个元素执行resolve函数

image.png

image.png

返回了一个字符串代表着传入参数的文件相对于整个工程的相对路径

**重点** 同时files作为一个函数,也接受一个req参数,这个和resolve方法的req参数是一样的,即匹配的文件名的相对路径,而files函数返回的是一个模块,这个模块才是真正我们需要的

1645425278(1).png

1645425293(1).png 参数就是files.keys()这个数组里的元素,返回值就是这个元素模块

这里可以利用循环

let api = {}; 
files.keys().forEach((file) => {
    let moduleName = file.replace(/(\.api\.js$)/, '').replace(/^\.\//, '');
    api[moduleName] = files(file).api;
});


export default api;

image.png