这是我参与8月更文挑战的第17天，活动详情查看：8月更文挑战
最近学习了一些代码优化的东西 挺有意思，学习就是不断打怪升级的过程~ 下面带大家看一下这些“真香定律”
require.context()的使用
我们在做项目的时候经常会遇到一个页面可能要导入读懂个组件，原始写法：
import titleCom from '@/components/home/titleCom'
import bannerCom from '@/components/home/bannerCom'
import cellCom from '@/components/home/cellCom'
components:{titleCom,bannerCom,cellCom}
以上这种操作写了大量的重复代码，利用require.context就可以将以上操作简化
const path = require('path')
const files = require.context('@/components/home', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
const name = path.basename(key, '.vue')
modules[name] = files(key).default || files(key)
})
components:modules
这种操作“姿势”不管页面引入多少组件,都可以使用这个方法。 知其然而且要知其所以然
下面我们来学习一下 require.context是什么？
require.context是一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块，这就是上面我们为啥可以那么写~
require.context使用须知
require.context函数接受三个参数
directory {String} -读取文件的路径
useSubdirectories {Boolean} -是否遍历文件的子目录
regExp {RegExp} -匹配文件的正则
语法: require.context(directory, useSubdirectories = false, regExp = /^.//);
借用webpakc官网的例子
require.context('./test', false, /.test.js$/);
上面的代码遍历当前目录下的test文件夹的所有.test.js结尾的文件,不遍历子目录
注意： require.context函数执行后返回的是一个函数,并且这个函数有3个属性
-
resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
-
keys {Function} -返回匹配成功模块的名字组成的数组
-
id {String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载?
这三个都是作为函数的属性(注意是作为函数的属性,函数也是对象,有对应的属性) 这里给大家处了组件的引用举例一个很实用的例子 vue 路由相关的 我们写前端的时候知道路由要大量导入 我们用 require.context 来改造一下 具体思路大概是
-
首先调用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中就可以使用了
是不是在做路由导入简便了操作 代码也更加简洁。
前端路漫漫其修远兮，吾将上下而求索，一起加油，学习前端吧
欢迎留言讨论~
