vue2中使用require.context批量注册组件

一、require.context的作用

1.1. 什么是 require.context

• 一个 webpack 的 api ，通过该函数可以获取一个上下文，从而实现工程自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）。
• 在前端工程中，如果一个文件夹中的模块需要频繁引用时可以使用该中方式一次性引入

1.2. 参数说明

参数	类型	说明
path	String	需要读取模块的文件的所在目录
useSubdirectories	Boolean	是否遍历子目录
RegExp	String	匹配的规则（正则表达式）

1.2.1. 参数path不能含有变量，否则会报错

• 错误写法

const path= '@/components';
require.context(path);

• 正确写法

require.context('@/components');

1.3. 返回值

const context = require.context('../../', false);
console.dir(context);

• 打印结果如下
  

返回值是一个函数，函数里面有三个属性，分别如下：

属性	类型	说明
resolve	Function	接受一个参数request，request为文件夹下面匹配文件的相对路径，返回这个匹配文件相对于整个工程的相对路径
keys	Function	返回一个数组，由匹配成功的文件所组成的数组
id	String	执行环境的 id

1.4. 应用场景

1.4.1. 获取components目录下面的所有vue文件的文件名称

注意： 我这里说的是文件名称

• 项目结构
  
• 代码块

const context = require.context('@/components', false, /\.vue$/);
console.dir(context.keys());

• 打印结果
  

1.4.2. 获取components目录下面的所有的vue的组件实例

注意： 我这里说的是组件实例

写法一：按照顺序一个一个获取组件实例的获取

按照顺序一个一个获取组件实例的获取

• 代码块

const context = require.context('@/components', false, /\.vue$/);
context.keys().forEach(fileName => {
	// 组件实例
	const component = context(fileName);
	console.log(component);
});

• 打印结果
  

写法二：一次行获取全部组件实例

一次行获取全部组件实例

• 简单写法

const context = require.context('@/components', false, /\.vue$/);
// 简单写法
const components = context.keys().map(context);
console.log(components);

• 完整写法

const context = require.context('@/components', false, /\.vue$/);
// 完整写法
const components = context.keys().map(fileName => {
	return context(fileName);
});
console.log(components);

三、vue2中使用require.context批量注册组件

const requireComponents = require.context('@/components', true, /\.vue/);
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
	// 组件实例
	const reqCom = requireComponents(fileName);
	// 截取路径或者组件的name作为组件名
	const reqComName = reqCom.defautl?.name ?? fileName.replace(/\.\/(.*)\.vue/, '$1');
	// 组件挂载 或者其它地方挂载
	Vue.component(reqComName, reqCom.default);
});