require.context()实现自动话导入文件

Posted 2022-05-11 GHUIJS

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);