使用require.context实现前端工程自动化

require.context是什么

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

什么时候需要用到require.context

如果有以下情况,可以考虑使用require.context替换

index.js

modules

在Vue写的项目中,我把路由通过不同的功能划分成不同的模块,在index.js中一个个导入(原谅ide的警告-.-),但是如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.context函数遍历modules文件夹的所有文件一次性导入到index.js中

分析require.context

require.context函数接受三个参数

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

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

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

语法: require.context(directory, useSubdirectories = false, regExp = /^.//);

借用webpakc官网的例子

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

上面的代码遍历当前目录下的test文件夹的所有.test.js结尾的文件,不遍历子目录

大概用图片来表示的话就是这样子的

在index.js中调用 require.context('./test', false, /.test.js$/);会得到test文件下3个文件的执行环境

值得注意的是require.context函数执行后返回的是一个函数,并且这个函数有3个属性

1. resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径

2. keys {Function} -返回匹配成功模块的名字组成的数组

3. id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载?

这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性)

talk is cheap ,show me the code

结合工程看一下这3个属性返回了什么

我们在里层的modules文件夹新建一个index.js,用来收集所有的模块然后一次性导出给外层的index.js

这里我们先上代码,代码是写在里层的index.js中的(代码借鉴于加快Vue项目的开发速度)

这里我把require.context函数执行后的代码赋值给了files变量,files中保存了图一的以.js结尾的文件,files是个函数,我们分别调用者3个属性看看会返回什么

控制台打印结果

可以看到

执行了keys方法返回了一个由匹配文件的文件名组成的数组
id属性返回了匹配的文件夹的相对于工程的相对路径,是否遍历子目录,匹配正则组成的字符串

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

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

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

这个Module模块和使用import导入的模块是一样的

回到工程

• 首先调用require.context导入某个文件夹的所有匹配文件,返回执行上下文的环境赋值给files变量

• 声明一个configRouters用来暴露给外层index.js作为vue-router的数组

• 调用files函数的keys方法返回modules文件夹下所有以.js结尾的文件的文件名,返回文件名组成的数组

• 遍历数组每一项,如果是index.js就跳过(index.js并不是路由模块),调用files函数传入遍历的元素返回一个Modules模块

• 因为我的路径是用export default导出的,所以在Module模块的default属性中获取到我导出的内容(即路由的结构),类似这种样子

• 将上一步返回的所有路由结构添加到configRouters数组然后暴露给外层的index.js

外层index.js

• 外层引入后导入到vue-router中就可以使用了

写在后面

在使用require.context自动导入路由文件时发现一个问题,路由的顺序不是你期望的样子,因为webpack是根据你文件夹中文件的位置排序的,这个时候需要定义一个标识符来给路由数组排序,这里我们给每个文件夹最上层的路由添加一个sort属性用于排序

随后在读取模块后,给外层index传入路由配置前,给路由的模块排序

require.context另外一个常用的地方是svg图标,可以不用每次导入图标文件,相对于以前的iconfont,svg有很多好处强烈推荐,详情可以看这个