Webpack require.context() 前端工程化之动态导入文件

在我们使用redux时会需要导入一大批reduce文件，然后进行合并，这时候可能会漏掉一些js文件，或者多人合作时会遇到代码冲突，如下：

import { combineReducers } from 'redux';
import menuWarnList from '@reducers/menuWarnList';

export default combineReducers({
    menuWarnList
});

menuWarnList可能会需要导入很多类似的文件。

这时候有什么好办法解决那？

直到我网上看到了 require.context() 。

使用 require.context() 方法可以来创建自己的（模块）上下文。

require.Context

这个方法有 3 个参数：

• 要搜索的文件夹目录
• 是否还应该搜索它的子目录
• 以及一个匹配文件的正则表达式。

我们的项目文档结构如下：

下面来看下如何使用

import path from 'path';
import { combineReducers } from 'redux';

//获取reducers下面所有的js文件
const files = require.context('@reducers', false, /\.js$/);

const modules = {};
//遍历文件
files.keys().forEach(key => {
    const name = path.basename(key, '.js');
  // 获取真实的文件导出数据
    const file = files(key);
    modules[name] = (file.__esModule && file.default) || files(key);
});

export default combineReducers(modules);

简单吧，这样就可以轻松的获取一个目录下的所有的需要的文件。