内容

简介

1、一个webpack的api,主要用来实现自动化导入模块

  • 在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api;

  • 它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块

2、接受三个参数

  • 1) 读取文件的路径 string
  • 2) 是否遍历文件的子目录 boolean
  • 3) 匹配文件的正则 RegExp
语法: require.context(directory, useSubdirectories = false, regExp = /^.//);

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

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

  • 1)resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
  • 2)keys {Function} -返回匹配成功模块的名字组成的数组
  • 3){String} -执行环境的id,返回的是一个字符串,主要用在module.hot.accept,应该是热加载?

4、 扩充知识

在正则表达式中要匹配一个反斜杠时,需要四个反斜杠。

语法

 const path = require('path')
 const files = require.context('@/components/context', false, /\.vue$/);
 const modules = {};
 files.keys().forEach(key => {
    const name = path.basename(key, ".vue");
    modules[name] = files(key).default || files(key);
  });
  components: modules,

image

require.context()方法
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。