使用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。