store中需要引入很多modules/*.js , 可以使用require.context

Posted 2021-09-13 wxy_王逍遥

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