webpack文档-依赖管理-require.context:webpack.docschina.org/guides/depe…
vuex的文件很多的情况下,就需要写很多的代码,每次加个模块就得往index的文件里添加地址
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import app from './modules/app'
import tab from './modules/tab'
import iframe from './modules/iframe'
import menu from './modules/menu'
import gStore from './modules/gStore'
import userInfo from './modules/userInfo'
import api from './modules/api.js'
import newAudit from './modules/newAudit'
import qualifydata from './modules/qualifydata'
export default new Vuex.Store({
state:{},
getters:{}
modules: {
app,
tab,
iframe,
menu,
gStore,
userInfo,
api,
newAudit,
qualifydata
}
})
使用依赖管理的话就方便了很多,以下是个人对文档的使用的理解:
// require.context('搜索的目录','是否还搜索其子目录',正则匹配表达式)
var modulesFiles = require.context('./modules', false,/\.js$/)
// console.log(modulesFiles) //返回一个函数
// console.log(modulesFiles.keys()) //将目录下的目录解析成数组返回 //["./menu.js", "./user.js"]
// console.log(modulesFiles('./menu.js')) // 传入文件的目录,拿到文件里导出的内容
// console.log(modulesFiles('./info/info.js')) // 拿到文件里导出的内容,拿到子目录的导出的对象,context要设置true,才能拿到
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
//$1是第一个(里面的内容),$2是第二个括号的内容,以此类推
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/g,'$1'); //提取模块的名字作为modules的key
// console.log(moduleName) //./menu.js 提取出 menu 作为modules的key
const value = modulesFiles(modulePath);//通过文件的路径./menu.js,导出文件的内容
modules[moduleName] = value.default;
return modules; //将最终的值返回出去
},{}) //reduce初始值是{}
const store = new Vuex.Store({
modules,
getters
})
export default store;
删除注释:
var modulesFiles = require.context('./modules', false,/\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/g,'$1');
const value = modulesFiles(modulePath);//通过文件的路径./menu.js,导出文件的内容
modules[moduleName] = value.default;
return modules; //将最终的值返回出去
},{})
const store = new Vuex.Store({
state:{},
modules,
getters
})
export default store;