阅读 181

require.context()让VUE开发更简单,get it~

这是我参与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个属性

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

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

  3. 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中就可以使用了 是不是在做路由导入简便了操作 代码也更加简洁。

前端路漫漫其修远兮,吾将上下而求索,一起加油,学习前端吧

欢迎留言讨论~

文章分类
前端
文章标签