前端 vue -- 批量import引入多個檔案
阿新 • • 發佈:2021-01-09
最近寫個專案需要在一個檔案中引入多個檔案
// 知識點1: 可用於模組的批量匯入,類同於import引入同一資料夾下多個檔案。 // require.context(directory, useSubdirectories = false, regExp = /^.//); // 引數: 1. 讀取檔案的路徑 2. 是否遍歷檔案的子目錄 3. 匹配檔案的正則表示式 // 返回是一個函式,是該資料夾下的匹配檔案的執行環境 // 該函式有三個屬性 // 1. resolve {Function} -接受一個引數request,request為test資料夾下面匹配檔案的相對路徑,返回這個匹配檔案相對於整個工程的相對路徑 // 2. keys {Function} -返回匹配成功模組的名字組成的陣列 const modulesFiles = require.context(’./modules’, true, /.js$/) // 知識點2:reduce(()=> {total, currentValue, currentIndex, arr}, initValue) // 引數: 1. 執行每條資料的函式 2. 傳遞給函式的初始值,可選(以前沒發現初始值的妙用-可用於統計個數、去重等) // 函式的引數 // 1. total 必需。初始值, 或者計算結束後的返回值。如果設定初始值就用初始值,否則就是函式的第一條資料 // 2. currentValue 必需。當前元素 const modules = modulesFiles.keys().reduce((modules, modulePath) => { // 忽略第1個js const moduleName = modulePath.replace(/^./(.*).\w+$/, ‘$1’) // 執行modulesFiles函式,返回一個物件{default: {// 檔案內容}, _esModule: true} const value = modulesFiles(modulePath) modules[moduleName] = value.default return modules }, {}) const store = new Vuex.Store({ modules, getters }) export default store