require.context()

require.context() MDN

require.context(directory, useSubdirectories, regExp)// 例子require.context('./test', false, /\.test\.js$/);// （创立出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。
directory：要搜寻的目录是否搜寻其子目录匹配文件的正则表达式

一个 context module 会导出一个（require）函数，此函数能够接管一个参数：request。 此导出函数有三个属性： resolve, keys, id 。

  • resolve 是一个函数，返回request 被解析后失去的模块id；
  • keys 也是一个函数，返回一个数组，由所有可能彼此 context module 解决的申请组成；
  • id 是 context module 外面所蕴含的模块 id. 它可能在你应用 module.hot.accept 时会用到。

例子：引入一个文件夹上面的所有js文件

function importAll (r) {    r.keys().forEach(r);}importAll(require.context('../components/', true, '/\.js$/'));
var cache = {};function importAll (r) {  r.keys().forEach(key => cache[key] = r(key));}importAll(require.context('../components/', true, /\.js$/));// 在构建时(build-time)，所有被 require 的模块都会被填充到 cache 对象中。

原：store/index.js

import Vue from 'vue'import Vuex from 'vuex'import permission from './modules/permission'import user from './modules/user'import tagsView from './modules/tagsView'import roleManage from './modules/roleManage'import userManage from './modules/userManage'import getters from './getters'Vue.use(Vuex)const store = new Vuex.Store({  modules: {    permission,    user,    tagsView,    roleManage,    userManage  },  getters,  strict: false})export default store

改：能够应用require.context

import Vue from 'vue'import Vuex from 'vuex'import getters from './getters'const modulesFiles = require.context('./modules', false, /\.js$/)const modules = modulesFiles.keys().reduce((modules, modulePath) => {  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')  const value = modulesFiles(modulePath)  modules[moduleName] = value.default  return modules}, {})Vue.use(Vuex)const store = new Vuex.Store({  modules,  getters,  strict: false})export default store