require.context()用法详解

---

前言

require.context() 是 Webpack 提供的 API，用于在运行时动态地导入模块，在 Vue.js 项目中常用于自动注册路由、组件等功能。

---

一、require.context(directory,useSubdirectories,regExp)使用

参数

const routeFiles = require.context(‘…/router/main’, true, /.ts/)

上述代码表示在 ../router/main目录中（相对于当前文件所在的目录），递归地寻找所有以 .ts 结尾的文件，并返回一个函数。返回的函数有三个属性。

• directory：导入文件路径
• useSubdirectories：是否递归
• regExp：正则表达式

属性

• keys()：返回匹配的文件路径列表。

• resolve()：返回匹配的模块绝对路径。

• Context(key: String)：返回对应路径的模块的默认导出。

二、使用

代码如下（示例）：

import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

const routes = [];
const files = require.context('../router/main', true, /\.ts/);

files.keys().forEach(key => {
  const fileName = key.replace(/(.*\/)*([^.]+).*/gi, "$2"); // 提取文件名
  if (fileName.toLowerCase() !== "index") { // 排除 index.ts
    const routeModule = files(key);
    routes.push(...routeModule.default); // 拼接路由到 routes 数组中
  }
});

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
});

export default router;

这个代码通过 require.context 加载 …/router/main 下所有以 .ts 结尾的文件，筛选出不是 index.ts 的文件，然后将这些文件中的路由添加到 routes 数组中，最后通过 VueRouter 的构造函数生成路由实例并导出。

这样我们只需要在 …/router/main 目录下添加新的路由文件，在项目启动时，Webpack 就会自动将这些路由注册到路由表中。