js一个文件中引用大量模块的方法

很多情景下，我们需要使用到某一个文件中引入大量模块，而手动逐一import是十分繁琐的行为，特别是在Vuex的使用过程中，需要在store中导入许多state、mutations和actions，这时就不能手动逐一导入了，这里可以使用require的context方法。

require.context(directory,useSubdirectories,regExp)

1. directory:表示检索的目录
2. useSubdirectories：表示是否检索子文件夹
3. regExp:匹配文件的正则表达式,一般是文件名后缀
   例如 require.context("@/views/components",false,/.vue$/)

下面就是一个例子，是将./modules下的所有.js文件都导入至Vuex的store中，文件的目录结构如下：

在store/index.js中，就可以写以下的代码，将./modules路径下的所有js文件均导入至Vuex的store中

import Vue from "vue";
import Vuex from "vuex";
import getters from "./getters";
Vue.use(Vuex);
const modulesFiles = require.context("./modules", true, /\.js$/);
let keys=modulesFiles.keys()
// 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'
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
  const value = modulesFiles(modulePath);
  modules[moduleName] = value.default;
  return modules;
}, {});
console.log({modules})

const store = new Vuex.Store({
  modules,
  getters,
});

此外，对于一个组件中需要引入文件夹下很多个组件时，也可以用这种方法：

const path = require('path')
const files = require.context('@/components/Base', false, /\.vue$/)
const modules = {}
files.keys().forEach(key => {
  const name = path.basename(key, '.vue')
  modules[name] = files(key).default || files(key)
})
export default{
    components:modules
    ...
}