模塊動態引入

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）