require.context是什麼
一個webpack的api,通過執行require.context函數獲取一個特定的上下文,主要用來實現自動化導入模塊,在前端工程中,如果遇到從一個文件夾引入很多模塊的情況,可以使用這個api,它會遍歷文件夾中的指定文件,然後自動導入,使得不需要每次顯式的調用import導入模塊
在Vue寫的項目中,我把路由通過不同的功能劃分成不同的模塊,在index.js中一個個導入,但是如果項目變大了之後,每次手動import會顯得有些力不從心,這裏可以使用require.context函數遍歷modules文件夾的所有文件一次性導入到index.js中
require.context
require.context函數接受三個參數
- directory {String} -讀取文件的路徑
- useSubdirectories {Boolean} -是否遍歷文件的子目錄
- regExp {RegExp} -匹配文件的正則
語法: require.context(directory, useSubdirectories = false, regExp = /^.//);
const requireComponent = require.context('.', false, /\.vue$/)
console.log('requireComponent.keys():',requireComponent.keys()) // 打印
requireComponent.keys().forEach(fileName => {
const config = requireComponent(fileName)
console.log('config:',config) // 打印
const componentName = changeStr(
// ./child1.vue => child1
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
)
// 動態註冊該目錄下的所有.vue文件
Vue.component(componentName, config.default || config)
})
// 2 - 將globalComponent.js引入main.js
import global from './components/globalComponent'