require.context()用法详解

这篇具有很好参考价值的文章主要介绍了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;