在开发中大型项目时，会将一个大功能拆分成一个个小功能，除了能便于模块的复用，也让模块条理清晰，后期项目更好维护。像 api 文件一般按功能划分模块，在组合时可以使用 require.context 一次引入文件夹所有的模块文件，而不需要逐个模块文件去引入。每当新增模块文件时，就只需要关注逻辑的编写和模块暴露，require.context 会帮助我们自动引入。

需要注意 require.context 并不是天生的，而是由 webpack 提供。在构建
webpack 在代码中解析它。

1
2
3
4
5
6
7
8
9
10
11
12
13
const modelCreator = function () {
  const store = {};
  const context = require.context("./model", false, /\.(js|ts)$/);
  const modelList = context.keys();
  modelList.forEach((model) => {
    const namespace = context(model).default.namespace;
    store[namespace] = context(model).default;
  });
  console.log(store);
  return store;
};

export default modelCreator();

require.context 参数：

  • 文件夹路径
  • 是否递归查找子文件夹下的模块
  • 模块匹配规则，一般匹配文件后缀名

只要是需要批量引入的场景，都可以使用这种方法。包括一些公用的全局组件，只需往文件夹内新增组件即可使用，不需要再去注册