模块动态引入

1. directory {String} -读取文件的路径
2. useSubdirectories {Boolean} -是否遍历文件的子目录
3. regExp {RegExp} -匹配文件的正则

语法: require.context(directory, useSubdirectories = false, regExp = /^.//);

目录结构

• test.js
• z-test
  • a.js
  • b.js
  • c.js

// z-test/a.js
export default {
    name: 'file_a'
}

// z-test/b.js
export default {
    name: 'file_b'
}

// z-test/c.js
export default {
    name: 'file_c'
}

/**
 * test.js
 * 可以用于异步挂载的路由
 * 动态需要根据权限加载的路由表
 */
const modulesFiles = require.context('./z-test', true, /\.js$/)

const routesModules = []
// 自动引入 z-test 目录下的所有模块
modulesFiles.keys().reduce((modules, modulePath) => {
    const value = modulesFiles(modulePath)
    routesModules.push(value.default)
}, {})

console.log(routesModules);

例子

reducer 动态 引入

const reducerModules = require.context('./reducer', true, /\.js$/)

const asyncReducer = {}
reducerModules.keys().map(item => {
    const value = reducerModules(item)
    asyncReducer[item.match(/\/(\S*)\./)[1]] = value.default
    return false
})

const reducer = combineReducers(asyncReducer)
const store = createStore(reducer）