vue项目使用require.context引入某文件夹下的所有模块

我们用vue开发的有时候需要引入某文件夹下的所有模块(示例用的vue2)，比如api.js，项目里有很多接口，这时如果手动一个一个引入的话不仅容易出错而且在多人协作开发的时候容易冲突，这时候就需要下面的代码来一次引入。
下图是文件目录截图：

如图所示，文件夹m>js下有a、b、c、d四个js，我们想在文件夹m下的index.js里引入这四个js然后export，方便其他地方引入。通常写法是在index.js里import那四个文件，然后export里面解构一下，这种写法也行，但如果要引入的文件有40个，难免会写错或者有代码冲突。这时候用webpack的require.context就很爽了，代码如下：

const modulesFiles = require.context('../m/js', true, /\.js$/)
const apis = []
modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  apis.push(...value.default)
  return modules
}, {})
export default apis

这个代码最后导出一个apis数组，假如要在main.js里引入：

import Vue from 'vue'
import App from './App'
import router from './router'

import apis from '../m/index.js' // 引入模块
console.log(apis) // 打印出模块数组，打印结果我放在最下面有截图

Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

下面是a.js里的内容，bcd只是改了里面的字母：

export default [
  {
    id: 'a1',
    api: 'a1'
  },
  {
    id: 'a2',
    api: 'a2'
  }
]

打印结果：