基于框架的項目開發(fā)中,我們在很多時候都需要將文件按模塊拆分,以此來達(dá)到功能復(fù)用的目的。在拆分模塊后,我們面臨的往往是模塊的引入及使用所帶來的事件成本的增加。本篇文章就為了解決這樣的問題而產(chǎn)生的。
1 require.context是什么?
require.content 是基于webpack的一個api,它可以引入文件夾中的所有文件,并獲取到文件的內(nèi)容,以此來實現(xiàn)模塊加載的功能。在前端工程中,如果遇到從一個文件夾引入很多模塊的情況,可以使用這個api,它會遍歷文件夾中的指定文件,然后 自動導(dǎo)入 ,使得不需要每次顯式的調(diào)用import導(dǎo)入模塊。
2 require.context語法分析
該api有自己的語法規(guī)則,利用對應(yīng)的規(guī)則,我們可以實現(xiàn)對模塊的自動引入的操作。
2.1 基礎(chǔ)語法
require.context(directory,useSubdirectories,regExp)?
require.contenxt有三個參數(shù)
directory
useSubdirectories
regExp
const requireComponent = require.context(
? // directory 表示其組件目錄的相對路徑
? './path',
? // useSubdirectories 表示是否查詢其子目錄
? false,
? // regExp 表示匹配基礎(chǔ)組件文件名的正則表達(dá)式
? /Base[A-Z]\w+\.(vue|js)$/
)
3 常見應(yīng)用場景
云和數(shù)據(jù)課程中包含了Vue及React課程,我們以Vue課程中的內(nèi)容為例,學(xué)習(xí)如何利用require.context來實現(xiàn)對模塊的自動加載功能,實現(xiàn)以下兩個功能
路由模塊的自動引入
vuex modules自動引入
3.1 路由模塊的自動引入
3.1.1 目錄分析
– router
?– routes?
? ?– user.js
? ? – posts.js
? ? – comemnt.js
? ? – category.js
? – index.js
3.1.2 代碼實現(xiàn)
在index.js中,我們需要引入routes中的所有的模塊,并在index.js中進(jìn)行模塊的注冊工作。
import Router from 'vue-router'
// 核心代碼開始
// 引入所有的模塊并獲取到文件名
const files = require.context('./routes', false, /\.js$/)
const _routes = []
// 對文件進(jìn)行遍歷
files.keys().forEach(key => {
? // 獲取文件中的內(nèi)容,并添加到事先創(chuàng)建好的數(shù)組中
?_routes.push(files(key).default)
})
// 核心代碼結(jié)束
m z
3.2 vuex 模塊的自動導(dǎo)入
3.2.1 目錄分析
– store
?– modules
? ?– user.js
? ? – posts.js
? ? – comemnt.js
? ? – category.js
? – index.js
3.2.2 代碼實現(xiàn)
在index.js中,我們需要引入modules中的所有的模塊,并在index.js中進(jìn)行模塊的注冊工作。
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,
? ? //文件中有寫可以省略;不過這樣寫可以不用給每個文件寫入;這個屬性不知道自己去查文檔;
? ? namespaced: true,? ??
? }
})
export default new Vuex.Store({
? modules: {
? ? …moduleStores,
? },
})
以上,就是我們通過 require.context 來完成自動化模塊引入的方案,通過這樣的方式。我們可以節(jié)省我們開發(fā)時的一些時間。
文 / 云和數(shù)據(jù)H5高級技術(shù)專家張老師
云和數(shù)據(jù)作為一個深耕IT職業(yè)教育多年的教育者,目前的課程涵蓋云計算、大數(shù)據(jù)、人工智能、虛擬現(xiàn)實、軟件工程、用戶體驗設(shè)計、網(wǎng)絡(luò)安全、電子商務(wù)等八大方向,結(jié)合企業(yè)實際用人需求,只為培養(yǎng)更多高端IT技術(shù)人才。
聲明:除云和數(shù)據(jù)原創(chuàng)文章外,分享和轉(zhuǎn)載的文章皆為促進(jìn)IT技術(shù)的傳播,并不代表本微信贊同其觀點和對真實性負(fù)責(zé),僅做交流學(xué)習(xí)使用,非商業(yè)用途。如有文章或圖片的原作者有異議或涉及版權(quán)問題,請立即聯(lián)系我們,我們將在第一時間進(jìn)行改正或刪除,確保您的權(quán)益,謝謝支持!
Copyright ? 2013-2021 河南云和數(shù)據(jù)信息技術(shù)有限公司 豫ICP備14003305號 ISP經(jīng)營許可證:豫B-20160281