使用webpack的动态模块功能实现类似包扫描来简化配置

昨天在浏览几个react项目的源码，发现当项目较大时，会有个很蛋疼的地方：
大型项目会根据模块来分拆reducer，因此会有大量的 <业务包名>/reducer/reducer.js 这样的结构，然后在createStore时又得合并起来。
因此需要写一个类似这样的代码来进行合并：

rootReducer.js

import aTodos from '../../xxxxx/reducers/xxxxxTodos'import bTodos from '../../yyyyy/reducers/yyyyyTodos'import cTodos from '../../zzzzz/reducers/zzzzzTodos'const rootReducer = combineReducers({  aTodos : aTodos ,  bTodos : bTodos ,  cTodos : cTodos})

随着模块的增加，该文件需要不断修改和调整。即使简化写成

export aTodos from '../../xxxxx/reducers/xxxxxTodos'export bTodos from '../../yyyyy/reducers/yyyyyTodos'export cTodos from '../../zzzzz/reducers/zzzzzTodos'

然后sotre文件去import * as ABC这样引入，也免不了写一些繁琐的格式化代码。

当时先想是不是可以做一些预处理根据格式来生成文件，但是觉得还是比较麻烦，版本管理器里还得保存这些版本。在翻阅webpack资料时，看到动态模块这块突然灵光乍现：是否可以实现自动扫描我的源码结构来动态生成呢？

于是翻阅了一些资料，发现我的想法是可以的，因为：

1）require.context 能够使用正则遍历你的文件结构，这个正是包扫描需要的
2）exports是一个对象结构，也就意味着你可以通过exports[key]=value的形式动态来导出你的export
3）combineReducers需要的是一个对象结构，我只需要通过 import * 导入我的文件，就能够作为一个对象导入

说干就干，于是有了这样的一个文件：

autoRecucers.js

/** * 基于路径扫描的配置模式. * @Author JIM on 2017/2/21. *  * 等效语句： * export aaa from './../module/aaa/reducer/reducer' * export bbb from './../module/bbb/reducer/reducer' * export ccc from './../module/ccc/reducer/reducer' * .... */let contexts = require.context("../module", true, /^\.\/.*\/redux\/reducer\.js$/);contexts.keys().forEach((key) => {    let name = /\.\/([^/]+)\//g.exec(key); //把包路径名变成导出名    let func = contexts(key).default;    if(typeof(func)!="undefined"){        exports[name[1]] = func;    }});

将我路径下的所有redux目录下的reducer.js的default export全部都变成export导出，然后：

import * as reducers from './auto/autoReducers';

    store = createStore(        combineReducers(reducers),        applyMiddleware(thunk)    );

好了，大功告成，再也不用维护rootReducer.js了。

这里只是抛砖引玉，同样的原理，使用webpack动态导出的特性，你还可以对其它的文件进行合并导出，例如actionType，等等，不限于redux。