require.context()返回一个webpack上下文的函数 （应用场景：组件内引入多个文件）

参考1

参考2

require.context('@/components/view', false, /\.vue$/)
// require.context()返回的是一个webpack上下文环境、本质是一个函数、有id、keys、resolve属性

// 应用场景： 常用来组件内引入多个组件

// 语法：
require.context(directory, useSubdirectories, regExp)
1.directory： 检索目录
2.useSubdirectories： 是否检索子文件夹、方法默认的值为false
3.regExp：匹配文件正则表达式

main.js 代码示例：

import Vue from 'vue'
const requireComponents = require.context('../views/components', true, /\.vue/)
// requireComponents.keys()返回的是对应正则匹配那些文件的路径组成的数组、例：
[
    "./array/arrayEqual.js",
    "./object/deepClone.js",
    "./object/isEmptyObject.js",
    "./object/isPlainObject.js"
]




requireComponents.keys().forEach(fileName => {
  // 组件实例
  const reqCom = requireComponents(fileName)
  // 截取路径作为组件名
  const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
  Vue.component(reqComName, reqCom.default || reqCom)
})

当使用vite时、发现不能使用require.context自动导入modules、可以使用import.metya.globEager替代

// require 自动导入实现
const files = require.context('.', false, /\.ts$/);
const modules = {};
files.keys().forEach((key) => {
     if (key === './index.ts') { return; }
     modules[key.replace(/(\.\/|\.ts)/g, '')] = files(key).default;
});
export default modules;

// import 自动导入实现
const files = import.meta.globEager("./*.ts")
const modules: any = {};

for (const key in files) {
    if (Object.prototype.hasOwnProperty.call(files, key)) {
        modules[key.replace(/(\.\/|\.ts)/g, '')] = files[key].default
    }
}
export default modules;