[webpack]require.context

require.context

webpack-require.context

context module API

一个 context module 会导出一个（require）函数，此函数可以接收一个参数：request。此导出函数有三个属性：resolve, keys, id。

• resolve 是一个函数，它返回 request 被解析后得到的模块 id。
• keys 也是一个函数，它返回一个数组，由所有可能被此 context module 处理的请求（译者注：参考下面第二段代码中的 key）组成。

function importAll(r) {
  r.keys().forEach(r);
}

importAll(require.context('../components/', true, /.js$/));

const cache = {};

function importAll(r) {
  r.keys().forEach((key) => (cache[key] = r(key)));
}

importAll(require.context('../components/', true, /.js$/));
// 在构建时(build-time)，所有被 require 的模块都会被填充到 cache 对象中。

• id 是 context module 的模块 id. 它可能在你使用 module.hot.accept 时会用到。

实际使用

import { RouteRecordRaw } from 'vue-router'
export function mapMenusToRoutes(userMenus: any[]): RouteRecordRaw[] {
  const routes: RouteRecordRaw[] = []
  // 1.先加载默认所有的routes
  const allRoutes: RouteRecordRaw[] = []
  const routeFiles = require.context('../router/main', true, /\.ts/)
  routeFiles.keys().forEach((key) => {
    console.log('key', key)
  })
  return routes
}