基于框架的项目开发中，我们在很多时候都需要将文件按模块拆分，以此来达到功能复用的目的。在拆分模块后，我们面临的往往是模块的引入及使用所带来的事件成本的增加。本篇文章就为了解决这样的问题而产生的。
1 require.context是什么？
require.content 是基于webpack的一个api，它可以引入文件夹中的所有文件，并获取到文件的内容，以此来实现模块加载的功能。在前端工程中,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后 自动导入 ,使得不需要每次显式的调用import导入模块。
2 require.context语法分析
该api有自己的语法规则，利用对应的规则，我们可以实现对模块的自动引入的操作。
2.1 基础语法
require.context(directory，useSubdirectories，regExp)
require.contenxt有三个参数
directory
useSubdirectories
regExp
const requireComponent = require.context(
// directory 表示其组件目录的相对路径
‘./path’,
// useSubdirectories 表示是否查询其子目录
false,
// regExp 表示匹配基础组件文件名的正则表达式
/Base[A-Z]\w+\.(vue|js)$/
)
3 常见应用场景
云和数据课程中包含了Vue及React课程，我们以Vue课程中的内容为例，学习如何利用require.context来实现对模块的自动加载功能，实现以下两个功能
路由模块的自动引入
vuex modules自动引入
3.1 路由模块的自动引入
3.1.1 目录分析
– router
– routes
– user.js
– posts.js
– comemnt.js
– category.js
– index.js
3.1.2 代码实现
在index.js中，我们需要引入routes中的所有的模块，并在index.js中进行模块的注册工作。
import Router from ‘vue-router’
// 核心代码开始
// 引入所有的模块并获取到文件名
const files = require.context(‘./routes’, false, /\.js$/)
const _routes = []
// 对文件进行遍历
files.keys().forEach(key => {
// 获取文件中的内容，并添加到事先创建好的数组中
_routes.push(files(key).default)
})
// 核心代码结束
m z
3.2 vuex 模块的自动导入
3.2.1 目录分析
– store
– modules
– user.js
– posts.js
– comemnt.js
– category.js
– index.js
3.2.2 代码实现
在index.js中，我们需要引入modules中的所有的模块，并在index.js中进行模块的注册工作。
import Vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(Vuex)
const context = require.context(‘./modules’, false, /\.js$/)
//获取moudules文件下所有js文件；
const moduleStores = {}
context.keys().forEach(key => {
// context.keys() 返回匹配成功模块的名字组成的数组
const fileName = key.slice(2, -3)
//通过 context(key)导出文件内容。在文件中通过 export.default 导出的，所以后边加.default
const fileModule = context(key).default;
moduleStores[fileName] = {
…fileModule,
//文件中有写可以省略；不过这样写可以不用给每个文件写入；这个属性不知道自己去查文档；
namespaced: true,
}
})
export default new Vuex.Store({
modules: {
…moduleStores,
},
})
以上，就是我们通过 require.context 来完成自动化模块引入的方案，通过这样的方式。我们可以节省我们开发时的一些时间。
文 / 云和数据H5高级技术专家张老师
云和数据作为一个深耕IT职业教育多年的教育者，目前的课程涵盖云计算、大数据、人工智能、虚拟现实、软件工程、用户体验设计、网络安全、电子商务等八大方向，结合企业实际用人需求，只为培养更多高端IT技术人才。
