技術標籤：vue後臺管理

在使用vue-element-admin實現後臺管理系統的時候，發現了require.context的好處，自動引入同一資料夾下的多個檔案

在專案中是用來引入了 store下的modules中的所有 *.js檔案
目錄結構如下。

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  // 忽略第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

 

1. require.context可用於檔案的批量匯入，類同於import 引入同一資料夾下多個檔案。
require.context(引數1, 引數2, 引數3);
引數1. 讀取檔案的路徑 。
引數2. 是否遍歷檔案的子目錄true或false 。
引數3. 匹配檔案的正則表示式

返回是一個函式，是該資料夾下的匹配檔案的執行環境
該函式有三個屬性

• resolve {Function}
  -接受一個引數request,request為test資料夾下面匹配檔案的相對路徑,返回這個匹配檔案相對於整個工程的相對路徑

• keys {Function} -返回匹配成功模組的名字組成的陣列

2. reduce(()=> { 引數1, 引數2, currentIndex, arr }, initValue)

函式的引數

• 引數1 必需。初始值, 或者計算結束後的返回值。如果設定初始值就用初始值，否則就是函式的第一條資料
• 引數2 必需。當前元素