require.context是什么
一个webpack的api,通过执行require.context函数获取一个特定的上下文,主要用来实现自动化导入模块,在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。
require.context( )语法如下:
require.context(directory, useSubdirectories = false, regExp = /^.//);
require.context() 方法来创建自己的(模块)上下文,这个方法有 3 个参数:
- 你要引入文件的目录
- 是否要查找该目录下的子级目录
- 匹配要引入的文件
实例:
// (你创建了)一个test文件夹下面(不包含子目录),能被require请求到,所有文件名以 `.test.js` 结尾的文件形成的上下文(模块)。
require.context("./test", false, /\.test\.js$/);
// (你创建了)一个父级文件夹下面(包含子目录),所有文件名以 `.stories.js` 结尾的文件形成的上下文(模块)。
require.context("../", true, /\.stories\.js$/);
require.context模块导出(返回)一个(require)函数,这个函数可以接收一个参数:request 函数–这里的 request 应该是指在 require() 语句中的表达式
导出的方法有 3 个属性: resolve, keys, id。
- resolve 是一个函数,它返回请求被解析后得到的模块 id。
- keys 也是一个函数,它返回一个数组,该数组是由所有可能被上下文模块解析的请求对象组成
- id 是上下文模块里面所包含的模块 id. 它可能在你使用 module.hot.accept 的时候被用到
什么时候需要用到require.context
如果有以下情况,可以考虑使用require.context替换
(1)在Vue写的项目中,我把写路由时候,在index.js中一个个导入,但是如果项目变大了之后,每次手动import会显得有些力不从心,这里可以使用require.context函数遍历views文件夹中的pages文件夹的所有文件一次性导入到index.js中。
index.js
import Vue from 'vue'
import Router from 'vue-router'
import pageRouter from './routerRegister';
Vue.use(Router);
export default new Router({
routes: [
...pageRouter
]
})
routerRegister.js
//自动扫描src/views/pages目录下的文件并注册路由
const pageRouter = [];
const componentsContext = require.context('../views/pages', true, /\.vue$/);
componentsContext.keys().forEach(component => {
const componentConfig = componentsContext(component);
const ctrl = componentConfig.default || componentConfig;
const routerName = ctrl.name;
routerName && pageRouter.push({
path: `/${routerName}`,
title: routerName,//这里我们可以用对象的key和value来展示汉字
name: routerName,
component: () =>
import (`@/views/pages/${routerName}/${routerName}.vue`)
});
});
export default pageRouter
(2)把一个文件夹照片中的组件挂在到全局,也可以使用。
import Vue from 'vue'
// 自动加载 global 目录下的 .vue 结尾的文件
const componentsContext = require.context('./global', true, /\.vue$/);
componentsContext.keys().forEach(component => {
const componentConfig = componentsContext(component);
/**
* 兼容 import export 和 require module.export 两种规范
*/
const ctrl = componentConfig.default || componentConfig;
Vue.component(ctrl.name, ctrl)
});
(3)store中modules中的文件多了也可以使用
。。。。。。