require.context是什么?

它是webpack的一个api,通过require.context函数获取一个特定的上下文,主要用来实现自动化导入模块。如果需要从一个文件夹中引入很多模块文件,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使我们不再需要写大量显式的import导入;

模块方法(module methods) | webpack 中文网

require.context的语法使用

require.context 接受3个参数:

  1、directory{ String } - 读取的文件夹路径

  2、useSubdirectories { Boolean } - 是否遍历文件的子目录

  3、regExp { RegExp } - 匹配文件的正则规则

语法: require.context ( directory, useSubdirectories = false, regExp = /^.// )

这里用于自动引入路由文件

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';

const routes: Array<RouteRecordRaw> = [];

require.context('./modules', false, /\.ts/).keys().forEach((RouteName) => {
	routes.push(require.context('./modules', false, /\.ts/)(RouteName).default);
});

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
})

export default router,

还常用于自动导入组件,静态资源(如:svg);

Logo

一站式 AI 云服务平台

更多推荐