[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
前端远比想象中的还要复杂,需要学习的还有很多,脚踏实地记录好遇到的麻烦与经验,三省吾身,才能慢慢积累经验。