云和大咖說：基于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技術人才。