使用require.context自动导入ES模块

随便记录一些东西,若有错误欢迎指出

require.context是什么

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

何时须要用到require.context

若是有如下状况,能够考虑使用require.context替换

在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

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

写在后面

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

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

• require.context另一个经常使用的地方是svg图标,能够不用每次导入图标文件,相对于之前的iconfont,svg有不少好处强烈推荐,详情能够看这个

手摸手，带你优雅的使用 icon