1. 程式人生 > 實用技巧 >前端 vue -- 批量import引入多個檔案

前端 vue -- 批量import引入多個檔案

最近寫個專案需要在一個檔案中引入多個檔案

// 知識點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