1.簡(jiǎn)介
require.context是Webpack中用來(lái)管理依賴的一個(gè)函數(shù),此方法會(huì)生成一個(gè)上下文模塊,包含目錄下所有模塊的引用,通過正則表達(dá)式匹配,然后require進(jìn)來(lái)
2.使用方法
require.context('.', false, /\.vue$/)
此方法有三個(gè)參數(shù),
參數(shù)一:要查詢的目錄,上述代碼指的是當(dāng)前目錄
參數(shù)二: 是否要查詢子孫目錄,方法默認(rèn)的值為false
參數(shù)三:要匹配的文件的后綴,是一個(gè)正則表達(dá)式,上述我要查詢的是.vue文件
require.context模塊返回一個(gè)函數(shù)椅野，這個(gè)函數(shù)可以接收一個(gè)參數(shù)
導(dǎo)出的方法有 3 個(gè)屬性： resolve, keys, id回还。
resolve 是一個(gè)函數(shù)，它返回請(qǐng)求被解析后得到的模塊 id氧秘。
keys 也是一個(gè)函數(shù)情臭，它返回一個(gè)數(shù)組，由所有可能被上下文模塊處理的請(qǐng)求組成赌蔑。
id 是上下文模塊里面所包含的模塊 id. 它可能在你使用 module.hot.accept 的時(shí)候被用到
3.應(yīng)用場(chǎng)景
import Vue from 'vue'
let contexts = require.context('.', false, /\.vue$/)
contexts.keys().forEach(component => {
// debugger;
let componentEntity = contexts(component).default
// 使用內(nèi)置的組件名稱 進(jìn)行全局組件注冊(cè)
Vue.component(componentEntity.name, componentEntity)
})
上述代碼中寫的是一個(gè)全局注冊(cè)的組件,用到了keys屬性,返回一個(gè)數(shù)組,通過遍歷,來(lái)完成組件注冊(cè),
contexts方法,內(nèi)部就是返回引用webpack_require來(lái)加載模塊,
使用componentEntity.name,來(lái)作為組件名,
即上述圖片組件中的name,
文件目錄
最后在main.js中引入index.js,該目錄下的組件就全部被全局注冊(cè),可以在任意vue中使用這些組件,
注意
很多組件可能只是單個(gè)頁(yè)面需要用到,我們?cè)诩虞d頁(yè)面的過程中俯在，希望組件也是按需加載的。組件全部注冊(cè)娃惯，那么當(dāng)頁(yè)面需要引用其中某些組件時(shí)跷乐，是不是將所有的組件都打包引入了呢？全局注冊(cè)的意思是不是已經(jīng)全部被引入趾浅？
對(duì)于所有組件都在項(xiàng)目中被用到的情況來(lái)說愕提，全局注冊(cè)和按需引入的方式在打包和運(yùn)行效率上并沒有什么區(qū)別，只是相對(duì)來(lái)說按需引入可讀性更強(qiáng)一點(diǎn)皿哨。
所以,大家可以根據(jù)自己的需求,合理使用
附言:
文中很多知識(shí)來(lái)源于官方文檔,以及各位前輩總結(jié)的結(jié)果,我這里介紹的可能不太清楚,有什么錯(cuò)誤,歡迎指出!
基于vue+element 的后臺(tái)管理框架
GitHub: https://github.com/wxyfc/management-system
網(wǎng)址: https://wxyfc.github.io/management-system/#/login浅侨，賬號(hào):admin 密碼:admin 直接點(diǎn)擊登錄即可
如果對(duì)您有幫助請(qǐng)點(diǎn)個(gè)小星星哦,謝謝大家觀看,mua~
