require.context前端自動導入文件方法

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'