require.context是什麼
一個webpack的api,通過執行require.context函數獲取一個特定的上下文,主要用來實現自動化導入模塊,在前端工程中,如果遇到從一個文件夾引入很多模塊的情況,可以使用這個api,它會遍歷文件夾中的指定文件,然後自動導入,使得不需要每次顯式的調用import導入模塊
什麼時候需要用到require.context
在Vue寫的項目中,我把路由通過不同的功能劃分成不同的模塊,在index.js中一個個導入(原諒ide的警告-.-),但是如果項目變大了之後,每次手動import會顯得有些力不從心,這裏可以使用require.context函數遍歷modules文件夾的所有文件一次性導入到index.js中
const modulesFiles = require.context(’./modules’, true, /.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
// set ‘./app.js’ => ‘app’
const moduleName = modulePath.replace(/^./(.*).\w+$/, ‘$1’)
const value = modulesFiles(modulePath)
modules[moduleName] = value.default
return modules
}, {})
