使用webpack模块化导入store的文件

189 阅读1分钟

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;