如何用require.context动态导出组件

一、公共路由和组件导出冲突问题

当多人共同开发和维护公共库或者项目的时候，可能会同时操作路由文件和组件的公共导出文件， 这将导致公共文件冲突。为了解决这个问题，可以只让开发者只关注自己的组件或者页面，通过require.context来自动导入了路由和组件。

二、require.context是什么

require.context 是一个 Webpack 提供的函数，用于在代码中动态地引入模块。通过指定一个目录和一个正则表达式，require.context 可以返回一个函数，这个函数可以用来获取匹配指定条件的模块。这样可以实现自动化地导入模块，减少手动引入的工作量，特别适用于需要批量导入模块的情况。

三、require.context用法

自定义上下文

函数传入三个参数：要搜索的目录、是否还搜索其子目录，匹配文件的正则表达式。

webpack 会在构建中解析代码中的 require.context()

上下文模块 API

上下文模块会导出一个接收一个参数 request 的 require 函数。

此导出函数有三个属性：resolve，keys 与 id。

• resolve 是一个函数，它返回 request 被解析后得到的模块 id。
• keys 也是一个函数，它返回一个数组，由所有可能被此上下文模块处理的请求组成。

如果想引入一个文件夹下面的所有文件，或者引入能匹配一个正则表达式的所有文件，这个功能就会很有帮助，例如：

function importAll(r) {
  r.keys().forEach(r);
}

importAll(require.context('../components/', true, /.js$/));

const cache = {};

function importAll(r) {
  r.keys().forEach((key) => (cache[key] = r(key)));
}

importAll(require.context('../components/', true, /.js$/));
// 构建时所有被导入的模块都会被填充到缓存对象中。

• id 是上下文模块的模块 id. 它可能在使用 module.hot.accept 时会用到。

四、普通写法

这种写法可能会导致代码冲突以及组件开发者会频繁的更改公共导出文件。

import EaUserManageWrapper from './user-manage/ea-user-manage-wrapper.vue'
import userManageSetting from './user-manage/user-manage-setting.vue'
...此处会引入很多组件
export default [EaUserManageWrapper, userManageSetting, ...此处会导出很多引入的组件]

五、require.context改造

公共文件动态导入组件，开发者只需关注组件的开发和维护。

// 该文件不需维护，会动态引入所开发的组件 design.js
const context = require.context('./', true, /index\.js$/)
let moduleList = []

// 通过上下文模块动态导入所有匹配的模块
context.keys().forEach(key => {
  const module = context(key);
  moduleList = [...moduleList, ...module.default]
});

export default moduleList

开发者关注代码块

// 组件内部单独导出index.js
import JhRoleManageWrapper from './jh-role-manage-wrapper.vue'
import roleManageSetting from './role-manage-setting.vue'
export default [JhRoleManageWrapper, roleManageSetting]

目录结构