js - 单次引入多个组件并导出

需求

在 components 文件夹下有多个组件，需要一次性将多个组件导出使用

一般做法（一个一个导入再导出 - 繁琐）

import PenaltyTimeDistributionPattern from './PenaltyTimeDistributionPattern'
import LawPeakTime from './LawPeakTime'
import PunishIllegalBehavior from './PunishIllegalBehavior'
import CarIllegalRegular from './CarIllegalRegular'
import CaseRiskTrend from './CaseRiskTrend'
import MainLawRisk from './MainLawRisk'
import LawCaseIntegral from './LawCaseIntegral'
import ScenePunishTime from './ScenePunishTime'
import LawAndCasePoints from './LawAndCasePoints'
import SearchDialog from './SearchDialog'

export default {
  PenaltyTimeDistributionPattern,
  LawPeakTime,
  PunishIllegalBehavior,
  CarIllegalRegular,
  CaseRiskTrend,
  MainLawRisk,
  LawCaseIntegral,
  ScenePunishTime,
  LawAndCasePoints,
  SearchDialog
}

代码升级（统一导入并导出）

const components = require.context('./', true, /\.vue$/) // 导入 ./ 文件夹下所有以 .vue 结尾的文件
console.log('components ----', components)
console.log('components.keys() ----', components.keys())
const com = components.keys().reduce((com, comPath) => { // 处理文件名供导出
  const comName = comPath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = components(comPath)
  com[comName] = value.default
  return com
}, {})

console.log('com----', com)

export default com

优点

• 避免一个一个文件导入，文件过多时导入繁琐问题