require.context 实现前端自动引入同一文件夹下多个文件

本文介绍了在Vue-element-admin项目中使用require.context进行文件批量导入的方法,特别是在处理store/modules下所有.js文件时的应用。通过require.context的三个参数实现文件路径指定、子目录遍历及文件匹配,并详细解析了其返回函数的三个属性:resolve、keys和reduce。require.context提供了自动化导入同一目录下多个文件的能力,简化了手动导入的繁琐工作。
摘要由CSDN通过智能技术生成

在使用vue-element-admin实现后台管理系统的时候,发现了require.context的好处,自动引入同一文件夹下的多个文件

在项目中是用来引入了 store下的modules中的所有 *.js文件
目录结构如下。
在这里插入图片描述


import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)

// you do not need `import app from './modules/app'`
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // set './app.js' => 'app'
  // 忽略第1个js
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
   // 执行modulesFiles函数,返回一个对象{default: {// 文件内容}, _esModule: true}
  const value = modulesFil
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值