dva redux数据管理都在models,根据业务不同models可能会有几十甚至上百的 【模块.js】,

每次在index.js使用 app.model(require('./models/example').default);  引入 Model 可能要写多个,

那么如何优雅的扩展model,不去重复的require model呢,利用 require.context就可以做到。

require.context是什么

你可以使用该require.context()函数创建自己的上下文。

它允许您传入一个目录进行搜索,一个标志指示是否应该搜索子目录,还有一个正则表达式来匹配文件。

webpack require.context()在构建时解析代码

语法如下:

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

directory 目录,如当前目录下的test: './test' useSubdirectories是否使用子目录, regExp 正则匹配test文件夹下的文件 如匹配js文件 /\.js$/

如下 取出当前目录下的js文件,并过滤掉index.js文件,再用map遍历文件名,context返回default方法:

const context = require.context('./', false, /\.js$/);
export default context
.keys()
.filter(item => item !== './index.js')
.map(key => context(key));

index.js文件引用models:

require('./models').default.forEach(key => {
app.model(key.default);
});

其他使用是一样的,只是不用一个个去require模块了。

dva webpack 利用require.context加载多个model的更多相关文章

  1. 微信小程序(五) 利用模板动态加载数据

    利用模板动态加载数据,其实是对上一节静态数据替换成动态数据:

  2. react开发中如何使用require.ensure加载es6风格的组件

    其实用的babel,在浏览器端就应该可以加载,之前少了个default: require.ensure([],(require) => { let A = require('./a.js').d ...

  3. .Net Core利用反射动态加载类库的方法(解决类库不包含Nuget依赖包的问题)

    在.Net Framework时代,生成类库只需将类库项目编译好,然后拷贝到其他项目,即可引用或动态加载,相对来说,比较简单.但到了.Net Core时代,动态加载第三方类库,则稍微麻烦一些. 一.类 ...

  4. C# 利用反射动态加载dll

    笔者遇到的一个问题,dll文件在客户端可以加载成功,在web端引用程序报错.解决方法:利用反射动态加载dll 头部引用加: using System.Reflection; 主要代码: Assembl ...

  5. interface21 - web - ContextLoaderListener(Spring Web Application Context加载流程)

    前言 最近打算花点时间好好看看spring的源码,然而现在Spring的源码经过迭代的版本太多了,比较庞大,看起来比较累,所以准备从最初的版本(interface21)开始入手,仅用于学习,理解其设计 ...

  6. webpack教程——css的加载

    首先要安装css的loader npm install css-loader style-loader --save-dev 然后在webpack.config.js中配置如下代码 意思是先用css- ...

  7. java反射并不是什么高深技术,面向对象语言都有这个功能,而且功能也很简单,就是利用jvm动态加载时生成的class对象

    java反射并不是什么高深技术,面向对象语言都有这个功能. 面向对象语言都有这个功能,而且功能也很简单,就是利用jvm动态加载时生成的class对象,去获取类相关的信息 2.利用java反射可以调用类 ...

  8. 一张图带你了解webpack的require.context

    很多人应该像我一样,对于webpack的require.context都是一知半解吧.网上很多关于require.context的使用案例,但是我没找到可以帮助我理解这个知识点的,于是也决定自己来探索 ...

  9. require.js 加载 js 文件 404 处理(配置无效)

    main.js 是 配置文件,data-main 是异步加载,如果在main.js未加载完成的时候,使用了require去加载文件,就会导致配置无效  main.js

随机推荐

  1. im2rec打包图片

    https://mxnet.incubator.apache.org/faq/finetune.html python ~/mxnet/tools/im2rec.py --list --recursi ...

  2. Spark Streamming 基本输入流(二) :Socket

    Spark Streamming 可以通过socket 进行数据监听. socket的输入方可以通过nc 或者自己开发nc功能的程序. 1.系统自带的nc su root a yum install ...

  3. EOJ Monthly 2019.1 唐纳德先生与这真的是签到题吗 【数学+暴力+multiset】

    传送门:https://acm.ecnu.edu.cn/contest/126/ C. 唐纳德先生与这真的是签到题吗 单测试点时限: 6.0 秒 内存限制: 1024 MB 唐纳德先生在出月赛的过程中 ...

  4. java中io创建文件和读取文件

    简单了解IO流:https://www.cnblogs.com/weibanggang/p/10034325.html package com.wbg.iodemo1128; import java. ...

  5. 简要的谈一谈我对CSS中长度单位的理解

    CSS中的长度单位目前分为两种,分别是绝对长度和相对长度.绝对长度单位包括: in:英寸 cm:厘米 mm:毫米 pt:磅(1磅等于1/72英寸) pc:pica(1pica等于12磅) 以上五个就是 ...

  6. MATLAB等距扇形反投影分析

    MATLAB等距扇形反投影分析 摘要:MATLAB phantom函数产生的Shepp-Logan模型,可以用来验证二维图像重建算法的数值精确度,本文首先据此模型,结合正弦图,讨论平行投影时的极坐标表 ...

  7. SignalR 教程一

    转帖官方教程:Tutorial: Getting Started with SignalR 2 and MVC 5 http://www.asp.net/signalr/overview/gettin ...

  8. vue根据:data-属性值绑定控制class变化

    checked的初始值 小bug: v的checked有被修改,但没有被渲染到页面中. 试了子组件修改后的值传回父组件没用. 最后修改数据后调用this.$forceUpdate();即可重新渲染,样 ...

  9. Redis的数据类型以及各类型的操作

    讲完安装和配置,接下来就是所有数据库的重头戏,数据结构和常用操作的增删改查了 redis是key-value的数据结构,每条数据都是⼀个键值对 键的类型是字符串 注意:键不能重复 值的类型分为五种: ...

  10. 使用jQuery实现向上循环滚动效果(超简单)

    今天突发奇想 想到的一个新思路 通过使用animate改变外边距达到滚动效果 再用复制节点插入到最后一行达到循环目的 HTML代码如下 <body> <ul style=" ...