基于框架的項目開發中，我們在很多時候都需要將文件按模塊拆分，以此來達到功能復用的目的。在拆分模塊后，我們面臨的往往是模塊的引入及使用所帶來的事件成本的增加。本篇文章就為了解決這樣的問題而產生的。

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技術的傳播，并不代表本微信贊同其觀點和對真實性負責，僅做交流學習使用，非商業用途。如有文章或圖片的原作者有異議或涉及版權問題，請立即聯系我們，我們將在第一時間進行改正或刪除，確保您的權益，謝謝支持！