vue vite正则动态匹配modules

合理的动态正则匹配可以为我们节省不少的配置代码。状态管理用的越多，省的代码就越多。代码也会比较清晰

1.webpack支持"require" 图一
2.vite却只支持"import" 图二

import { createStore } from 'vuex'
import getters from './getters'

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
    const value = modulesFiles(modulePath)
    modules[moduleName] = value.default
    return modules
}, {})

export default createStore({
    getters,
    modules,
})

import { createStore } from 'vuex'
import getters from './getters'


// const modulesFiles = require.context('./modules', true, /\.js$/)
const modulesFiles = import.meta.globEager('./modules/*.ts')
const modules:any = [];
for(let key in modulesFiles){
    if (Object.prototype.hasOwnProperty.call(modulesFiles, key)) {
        let valKey = key.replace(/modules\//, '')
        modules[valKey.replace(/^\.\/(.*)\.\w+$/, '$1')] = modulesFiles[key].default
    }
}
export default createStore({
  getters,
  modules
})

如想看更详细代码或想学习vite和vue3.2+请移步： tw-vue-vite: 一个基于vue3.2（全家桶）+ vite + elementplus的系统集成架构 (gitee.com)