Uncaught Referencerror: require is not defined

https://huaweicloud.csdn.net/638f143ddacf622b8df8eec0.html?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-6-125678833-blog-119806144.235%5Ev38%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Eactivity-6-125678833-blog-119806144.235%5Ev38%5Epc_relevant_default_base&utm_relevant_index=10https://huaweicloud.csdn.net/638f143ddacf622b8df8eec0.html?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-6-125678833-blog-119806144.235%5Ev38%5Epc_relevant_default_base&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromBaidu~activity-6-125678833-blog-119806144.235%5Ev38%5Epc_relevant_default_base&utm_relevant_index=10

在框架中使用是会报错的。例如如下代码：就会得到报错：那么在中，如何找到对应的方法呢？就可以使用或者方法了。为动态导入，构建时，会分离为独立的 chunk;而为直接引入。

在vue3+vite+ts框架中使用require.context是会报错的。例如如下代码：

const requireApi = require.context(
	// api 目录的相对路径
	'.',
	// 是否查询子目录
	false,
	// 查询文件的一个后缀
	/.js$/
)
console.log(requireApi)

就会得到报错：

那么在vue3+vite+ts中，如何找到对应的方法呢？

就可以使用import.meta.globEage或者import.meta.glob方法了。

import.meta.glob 为动态导入，构建时，会分离为独立的 chunk;而import.meta.globEager为直接引入。

const module = {}
const files = import.meta.globEager('./*.js') 
Object.keys(files).forEach((key,index) => {
	if([key] === './index.js') return
	//console.log(key) //输出./list.js
	//console.log(files[key]) //输出{get_label: ƒ, get_list: ƒ}
	Object.assign(module,files[key]) 
})
//解释：如果是key则打印出一个个单个字符，所以这里用了[key]则打印出一个字符串

export default module

而直接使用require.context时，则如下操作即可：

let module = {}
requireApi.keys().forEach((key,index)=>{
	if(key === './index.js') return
	console.log(key);
	Object.assign(module,requireApi(key))
})

export default module

require.context参数介绍
require.context(directory,useSubdirectories,regExp)

directory:表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp:匹配文件的正则表达式,一般是文件名