基于框架的項(xiàng)目開發(fā)中，我們?cè)诤芏鄷r(shí)候都需要將文件按模塊拆分，以此來達(dá)到功能復(fù)用的目的。在拆分模塊后，我們面臨的往往是模塊的引入及使用所帶來的事件成本的增加。本篇文章就為了解決這樣的問題而產(chǎn)生的。

1 require.context是什么？

require.content 是基于webpack的一個(gè)api，它可以引入文件夾中的所有文件，并獲取到文件的內(nèi)容，以此來實(shí)現(xiàn)模塊加載的功能。在前端工程中,如果遇到從一個(gè)文件夾引入很多模塊的情況,可以使用這個(gè)api,它會(huì)遍歷文件夾中的指定文件,然后 自動(dòng)導(dǎo)入 ,使得不需要每次顯式的調(diào)用import導(dǎo)入模塊。

2 require.context語法分析

該api有自己的語法規(guī)則，利用對(duì)應(yīng)的規(guī)則，我們可以實(shí)現(xiàn)對(duì)模塊的自動(dòng)引入的操作。

2.1 基礎(chǔ)語法

require.context(directory，useSubdirectories，regExp)

require.contenxt有三個(gè)參數(shù)

directory

useSubdirectories

regExp

const requireComponent = require.context(

// directory 表示其組件目錄的相對(duì)路徑

‘./path’,

// useSubdirectories 表示是否查詢其子目錄

false,

// regExp 表示匹配基礎(chǔ)組件文件名的正則表達(dá)式

/Base[A-Z]\w+\.(vue|js)$/

)

3 常見應(yīng)用場(chǎng)景

云和數(shù)據(jù)課程中包含了Vue及React課程，我們以Vue課程中的內(nèi)容為例，學(xué)習(xí)如何利用require.context來實(shí)現(xiàn)對(duì)模塊的自動(dòng)加載功能，實(shí)現(xiàn)以下兩個(gè)功能

路由模塊的自動(dòng)引入

vuex modules自動(dòng)引入

3.1 路由模塊的自動(dòng)引入

3.1.1 目錄分析

– router

– routes

– user.js

– posts.js

– comemnt.js

– category.js

– index.js

3.1.2 代碼實(shí)現(xiàn)

在index.js中，我們需要引入routes中的所有的模塊，并在index.js中進(jìn)行模塊的注冊(cè)工作。

import Router from ‘vue-router’

// 核心代碼開始

// 引入所有的模塊并獲取到文件名

const files = require.context(‘./routes’, false, /\.js$/)

const _routes = []

// 對(duì)文件進(jìn)行遍歷

files.keys().forEach(key => {

// 獲取文件中的內(nèi)容，并添加到事先創(chuàng)建好的數(shù)組中

_routes.push(files(key).default)

})

// 核心代碼結(jié)束

m z

3.2 vuex 模塊的自動(dòng)導(dǎo)入

3.2.1 目錄分析

– store

– modules

– user.js

– posts.js

– comemnt.js

– category.js

– index.js

3.2.2 代碼實(shí)現(xiàn)

在index.js中，我們需要引入modules中的所有的模塊，并在index.js中進(jìn)行模塊的注冊(cè)工作。

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() 返回匹配成功模塊的名字組成的數(shù)組

const fileName = key.slice(2, -3)

//通過 context(key)導(dǎo)出文件內(nèi)容。在文件中通過 export.default 導(dǎo)出的，所以后邊加.default

const fileModule = context(key).default;

moduleStores[fileName] = {

…fileModule,

//文件中有寫可以省略；不過這樣寫可以不用給每個(gè)文件寫入；這個(gè)屬性不知道自己去查文檔；

namespaced: true,

}

})

export default new Vuex.Store({

modules: {

…moduleStores,

},

})

以上，就是我們通過 require.context 來完成自動(dòng)化模塊引入的方案，通過這樣的方式。我們可以節(jié)省我們開發(fā)時(shí)的一些時(shí)間。

文 / 云和數(shù)據(jù)H5高級(jí)技術(shù)專家張老師

云和數(shù)據(jù)作為一個(gè)深耕IT職業(yè)教育多年的教育者，目前的課程涵蓋云計(jì)算、大數(shù)據(jù)、人工智能、虛擬現(xiàn)實(shí)、軟件工程、用戶體驗(yàn)設(shè)計(jì)、網(wǎng)絡(luò)安全、電子商務(wù)等八大方向，結(jié)合企業(yè)實(shí)際用人需求，只為培養(yǎng)更多高端IT技術(shù)人才。