一、前言
在工作中经常通过一些小细节来增加代码可读性，让代码看起来更加优雅，同时可以减少不必要的操作和时间。
通常会遇到需要引入一堆功能或作用类似文件，不过已经给出了对应的Api可以优雅的解决
二、正片
这里以框架vue在不同构建环境为例（webpack、vite）
1. webpack
先瞅代码
<script>
const allComponents = require.context("./components", true, /\.vue$/);
let res_components = {};
allComponents.keys().forEach((item) => {
let comp = allComponents(item);
let name = comp.default.name;
res_components[name] = comp.default;
});
export default {
name: 'StudentList',
components: { ...res_components },
}
</script>
require.context() 是什么
一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块
require.context() 用法
//传入参数
require.context(directory, useSubdirectories = false, regExp = /^.//);
//返回的函数
function webpackContext(req) {return __webpack_require__(webpackContextResolve(req))};
接受三个参数：require.context(directory,useSubdirectories,regExp)
directory：说明需要检索的目录 ,你要引入文件的目录
useSubdirectories：是否要查找该目录下的子级目录
regExp:匹配文件的正则表达式,匹配要引入的文件 ,一般是文件名
返回的函数：function webpackContext(req) {return __webpack_require__(webpackContextResolve(req))};
函数有三个属性：resolve 、keys、id
resolve: 是一个函数，他返回的是被解析模块的id ，接受一个参数request。
keys: 也是一个函数，他返回的是一个数组，该数组是由所有可能被上下文模块解析的请求对象组成
id：是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
2. vite
先瞅代码
<script>
import { defineComponent} from "vue";
const allComponents = import.meta.globEager("../components/*.vue");
let res_components = {};
Object.keys(allComponents).forEach((item) => {
let comp = allComponents[item];
let name = comp.default.name;
res_components[name] = comp.default;
});
export default defineComponent({
components: { ...res_components },
});
</script>
在使用vite 时，发现不能使用require.context 自动导入,可以使用import.meta.globEager或import.meta.glob替换
import.meta.glob()/import.meta.globEager()是什么
vite的glob函数是基于fast-glob实现的。fast-glob是node.js非常快速和高效的glob库提供了遍历文件系统和返回路径名的方法，这些路径名根据 Unix Bash shell 使用的规则和一些简化的规则返回匹配一组定义的指定模式，同时以任意顺序返回结果。快速、简单、有效。
import.meta.glob 为过动态导入，构建时，会分离为独立的 chunk
import.meta.globEager 为直接引入
import.meta.glob()/import.meta.globEager()需要注意什么
- 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
- 必须是相对路径（以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析）或一个别名路径
- Glob 匹配是使用
fast-glob来实现的 —— 阅读它的文档来查阅 支持的 Glob 模式。 - glob 的导入不接受变量，你应直接传递字符串模式。
- glob 模式不能包含与包裹引号相同的引号字符串（其中包括
'，"，```），例如，如果你想实现'/Tom\'s files/**'的效果，请使用"/Tom's files/**"代替。
三、结束总结
此文只是已vue引用组件为例，只限于参考，具体场景再稍稍调整
适用场景
- 在vuex中 多个modules模块 需要使用 import 一个一个引入
- 如果页面需要导入多个组件时，一般的写法
- 遍历目录所有图片、加载所有的图片
- 等等。。。。。。。。
遇到的问题及解决方法
问题：引用的文件在同一目录，引用时带了此文件。
方法： let fileName = item.replace(/^.+[/\w+]/(.).\w+1");//取所有文件名称
if (fileName === "index") return;//过滤当前文件
