网站开发培训-高端面授网站开发培训机构
云和教育:云和数据集团高端IT职业教育品牌
  • 华为
    授权培训中心
  • 腾讯云
    一级认证培训中心
  • 百度营销大学
    豫陕深授权运营中心
  • Oracle甲骨文
    OAEP中心
  • Microsoft Azure
    微软云合作伙伴
  • Unity公司
    战略合作伙伴
  • 普华基础软件
    战略合作伙伴
  • 新开普(股票代码300248)
    旗下丹诚开普投资
  • 中国互联网百强企业锐之旗
    旗下锐旗资本投资

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

  • 发布时间:
    2021-01-20
  • 版权所有:
    云和教育
  • 分享:

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

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高级技术专家张老师

001.jpg

云和数据作为一个深耕IT职业教育多年的教育者,目前的课程涵盖云计算、大数据、人工智能、虚拟现实、软件工程、用户体验设计、网络安全、电子商务等八大方向,结合企业实际用人需求,只为培养更多高端IT技术人才。