请选择 进入手机版 | 继续访问电脑版

require.context实现批量导入模块

[复制链接]
甜蜜的负担 发表于 2020-12-31 20:23:42 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
在项目开发中,使用vuex,如果项目过大,vuex就需要模块化,但是如果module分的过多,我们就需要在store的index.js中一个个引入,这样未免太麻烦,可以用webpack的设置require.context()来批量引入模块,无需一个个去引入
  1.   require.context(directory, includeSubdirs, filter, mode)
复制代码
require.context函数吸收4个参数:


  • directory {String} 读取文件的路径
  • includeSubdirs {Boolean} 是否遍历文件夹的子目次
  • filter {RegExp} 过滤文件的正则
  • mode {String} 加载方式
  1.     import Vue from 'vue';    import Vuex from 'vuex';    import getters from './getters';        Vue.use(Vuex);        // 获取 ./modules文件夹下面所有的js文件名称    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((arr, modulePath) => {      // set './app.js' => 'app'      const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1');      const value = modulesFiles(modulePath);      arr[moduleName] = value.default;      return arr;    }, {});        export default new Vuex.Store({      modules,      getters    });
复制代码
来源:https://blog.csdn.net/weixin_50575300/article/details/111919146
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )