[webpack] require.context

前言

因为vue项目组件化分出的模块很多，我们常常有需要引入同个文件夹下多个文件的时候，如果一个一个引入非常费事，此时就可以使用webpack的require.context 引入同个路径下的多个文件，获取他暴露的内容(exports default)

 

使用

require.context(directory, useSubdirectories = false, regExp = /^\.\//)

从官方给出的文档可以看到，第一个参数是需要匹配的文件的目录，第二个参数是 是否遍历匹配所有子集，第三个参数就是匹配目录的正则了。

详细用法以下面引入接口为例：

 

栗子

封装好api，放在同个文件夹里面

写好暴露的对象

 classify.js:

import request from '@/utils/request.js'

export default {
    name: 'classify',
    // 获取商品分组
    goodsType: (data) => request({
        method: 'get',
        url: '/api/shop/goods/GoodsType',
        data
    })
}

 

写好需要注册的index.js

require.context 匹配所有js

r.keys().default 拿到刚刚上面写的暴露的对象

 

最后暴露一下install 注册就行了

const data = {}

function importAll(r) {
  r.keys().forEach(key => {
        data[r(key).default.name] = r(key).default
  })
  return data
}

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

const install = (Vue) => {
    Vue.prototype.$api = data
}

export default install