一、介绍
require.context
是基于 webpack
的一个的 api
,主要用来实现模块的自动化导入
- 在前端工程中,如果遇到一个文件需要引入很多模块的情况,可以使用这个
api
require.context
会遍历文件夹中的指定文件,然后自动导入,这样就不需要每次显式的调用 import
来导入模块了
- 如果想引入一个文件夹下面的所有文件,或者引入能匹配一个正则表达式的所有文件,这个功能就会很有帮助
- 官网地址
二、require.context
三、vue2批量导入并注册全局组件
1、需求
- 将src/package文件夹下所有的.vue文件都注册为全局组件
2、代码
<!--src/package/jzzf/check.vue-->
<template>
<div>
<h1>银行初审子组件</h1>
<button @click="unityAudit">初审</button>
</div>
</template>
<script>
export default {
name: "beijingCheck",
data() {
return {
};
},
methods: {
unityAudit() {
alert("银行初审方法!!!");
},
},
};
</script>
<style></style>
const install = function (Vue) {
const reqContext = require.context('./', true, /\.vue$/)
reqContext.keys().forEach((item) => {
console.log(item);
console.log(reqContext(item).default)
const com = reqContext(item).default
Vue.component(com.name, com)
})
console.log(reqContext.id);
console.log(reqContext.keys());
console.log(reqContext.resolve(reqContext.keys()[0]));
};
export default install;
- src/package/index.js 输出打印内容如下:
import Vue from 'vue'
import App from './App.vue'
import comJs from '@/package/index.js'
Vue.use(comJs)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
- 到这里src/package文件夹下的.vue文件就全部注册为全局组件了,可以直接使用了
<template>
<div id="app">
<!-- 使用注册好的全局组件 -->
<beijingCheck/>
<hr>
<recheckTransfer/>
<hr>
<clearVoucherManage/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style></style>
四、vue2路由模块自动加载
1、需求
- 在
vue
项目中,我们通常会把路由通过不同的功能划分成不同的模块,然后在 index.js
中一个个导入
- 但是如果项目变大、路由特别多的时候,每次手动
import
就会变得很麻烦
- 这时可以使用
require.context()
函数遍历 routes
文件夹的所有文件,一次性导入到 index.js
中,生成路由表
2、代码
export default {
path: '/login',
component: () => import('@/views/login')
}
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const moduleFn = require.context('./routes', false, /\.js$/i)
const routes = moduleFn.keys().reduce((prev, curr) => {
let route = moduleFn(curr).default
if (Array.isArray(route)) {
prev.push(...route)
} else {
prev.push(route)
}
return prev
}, [])
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})