文件夹中的文件集合导出

关于require.context

介绍

一个 webpack 的 api ，通过该函数可以获取一个上下文，从而实现工程自动化（遍历文件夹的文件，从中获取指定文件，自动导入模块）。

应用场景

可以规范化模块命名，批量注册和获取组件。在前端项目中，如果一个文件夹中的模块需要频繁引用时可以使用该中方式一次性引入。

代码

const requireComponent = require.context(
  // 01 需要读取模块的文件的所在目录
  './',
  // 02 是否查询其子目录
  false,
  // 03 匹配基础组件文件名的正则表达式
  /.+\.(vue)$/
)

const components = {}
requireComponent.keys().forEach((fileName) => {
  // 获取组件配置
  const componentConfig = requireComponent(fileName)

  // 获取组件的命名
  const componentName = fileName.replace('./', '').replace('.vue', '')

  // 如果这个组件选项是通过 `export default` 导出的，
  // 那么就会优先使用 `.default`，
  // 否则回退到使用模块的根。
  components[componentName] = componentConfig.default || componentConfig

  /*
  // 全局注册组件
  Vue.component(componentName, componentConfig.default || componentConfig)
  */
})
// 导出的组件
export default components