云和大咖说：基于require.context的模块化自动引入功能实现

基于框架的项目开发中，我们在很多时候都需要将文件按模块拆分，以此来达到功能复用的目的。在拆分模块后，我们面临的往往是模块的引入及使用所带来的事件成本的增加。本篇文章就为了解决这样的问题而产生的。

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技术人才。