通过require.context注册多个组件、模块

require.context可以自动导入多个文件，通常在项目使用了vueX,导入多个模块的时候可以使用这个方法。 下面是我项目里vueX注册模块的使用： 我的文件夹

// vuex转化模块名
const fileNameRE = /^\.\/([^\s]+)\.js$/

function importAll(modulesContext) {
  return modulesContext.keys().map((modulesPath) => {
    const moduleName = (modulesPath.match(fileNameRE))[1] //获取名称
    return {
      moduleName,
      camelModuleName: moduleName.replace(
        /-(\w)/g,
        (_, c) => (c ? c.toUpperCase() : '')
      ),
      module: modulesContext(modulesPath).default
    }
  })
}

//store 文件夹下的index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
import {importAll} from 'src/utils'

import getters from './getters'
import createPersistedState from 'vuex-persistedstate'

// 注册模块
const storeModules = importAll(
  require.context(
  // 其组件目录的相对路径
  'src/store/modules',
  // 是否查询其子目录
  true, 
  // 匹配基础文件名的正则表达式
  /\.js$/)
)

const modules = storeModules.reduce(
  (finallModules, storeModule) => {
    finallModules[storeModule.camelModuleName] =
      storeModule.module
    return finallModules
  },
  {}
)

Vue.use(Vuex)

const store = new Vuex.Store({
  modules,
  plugins: [
    createPersistedState({
      storage: window.sessionStorage,
      reducer: state => ({
        auth: state.auth
      })
    })
  ],
  getters
})

export default store