[JavaScript知识库]require.context()实现自动话导入文件

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

2022深度学习开发者峰会

5月20日13:00让我们相聚云端，共襄盛会！