介绍
webpack的一个api，通过执行require.context() 获取一个特定的上下文，主要用来实现自动导入模块。
当我们遇到要从某一文件夹中导入多个模块时，我们可以用这个api,来进行导入，这样就不用每次都要单独导入了。
使用
假如有多处用到某些同一文件夹下的组件时，我可以利用它配合全局注册，这样就不用每次使用时导入了
以下例子用来设置一些公用的组件，这样当用到这些公用组件时，无需引入直接使用即可。
globalComponents.ts
/**
require.context(
'路径',
'是否查询子目录-boolean',
'匹配到组件文件名的正则'
) */
import { App } from "vue";
const requireComponents = require.context(
"../../components/globalComponents",
false,
/[A-Z]\w+.(vue|js)$/
);
export default {
install: (app: App) => {
requireComponents.keys().forEach((fileName) => {
// 获取组件配置
const componentConfig = requireComponents(fileName);
// 获取大驼峰式名字
const componentName = fileName.replace(/^./(.*).\w+$/, "$1");
app.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的，
// 那么就会优先使用 `.default`，
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
);
});
},
};
demo.vue
在demo.vue中 Scroll、Item、Loading这三个组件都是通过require.context()全局导入的。
<template>
<div class="rank">
<Scroll >
<Item />
</Scroll>
<Loading />
</div>
</template>
<script lang='ts'>
export default defineComponent({
setup() {
})
</script>
