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

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

声明：除云和数据原创文章外，分享和转载的文章皆为促进IT技术的传播，并不代表本微信赞同其观点和对真实性负责，仅做交流学习使用，非商业用途。如有文章或图片的原作者有异议或涉及版权问题，请立即联系我们，我们将在第一时间进行改正或删除，确保您的权益，谢谢支持！