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'

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章