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