分享:使用 webpack 的 require.context 实现路由“去中心化”管理
2017-12-05 10:52
513 查看
阅读须知:示例代码以 react-router V3 为例。其他路由同样适用,如:vue-router。同样其他的功能模块也可以用该思路进行相应的去中心化管理改造。
本文示例代码
当你在开发一个大型单页面应用的时候,项目之初一般做法是所有的路由规则都维护在一个
随着业务代码的增长路由很快会变成:
当路由变的越来越大,大到已经难以维护时。我们按照react-router 提供的思路,对路由按业务模块进行拆分。
按该方式拆分后,每个业务模块维护自身的路由配置。新增业务模块路由,只需要在总的 rootRoute 中引入该业务模块的路由即可(也就是加一行代码)。这个方案看来是已经接近完美了。但如果想达到连一行代码都不用加?实现彻彻底底的去中心化管理
想要彻彻底底的实现去中心化管理我们需要使用到 require.context
webpack 官方文档的介绍require.context
简单说就是:有了 require.context,我们可以通过正则匹配引入相应的文件模块。
require.context 有三个参数:
directory:说明需要检索的目录
useSubdirectories:是否检索子目录
regExp: 匹配文件的正则表达式
使用 require.context 改造后的 rootRoute.js 文件
优化后,新增一个业务模块,只要业务模块 route 文件遵循统一的目录结构。业务模块 route 就能被自动关联到 rootRoute 里。
查看示例代码
这个思路可应用于其他想要实现"去中心化"管理的功能模块。
模块化管理 reducer
本文示例代码
一个项目中路由的变化过程
当你在开发一个大型单页面应用的时候,项目之初一般做法是所有的路由规则都维护在一个route.js的文件里。
// rootRoute.js const rootRoute = { childRoutes: [ { path: '/', component: AppLayout, childRoutes: [ { path: 'shop', // 购买详情页 component: Shop }, { path: 'order', // 订单页 component: Order } // ... // 少量其他路由 // ... ] } ] };
随着业务代码的增长路由很快会变成:
// rootRoute.js const rootRoute = { childRoutes: [ { path: '/', component: AppLayout, childRoutes: [ { path: 'shop', // 购买详情页 component: ShopLayout, childRoutes: [ { path: 'foodDetail', component: FoodDetail }, { path: 'shoesDetail', component: ShoesDetail } // 其他 ] }, { path: 'order', // 订单页 component: Order, childRoutes: [ { path: 'remark', //订单备注 component: Remark }, { path: 'invoice', //发票抬头 component: Invoice }, { path: 'payment', //付款页面 component: Payment }, { path: 'userValidation', //用户验证 component: UserValidation }, { path: 'chooseAddress', //选择地址 component: ChooseAddress, childRoutes: [ { path: 'addAddress', //添加地址 component: AddAddress, childRoutes: [ { path: 'searchAddress', //搜索地址 component: SearchAddress } ] } ] } ] } // ... // 大量新增路由 // ... ] } ] };
当路由变的越来越大,大到已经难以维护时。我们按照react-router 提供的思路,对路由按业务模块进行拆分。
// rootRoute.js const rootRoute = { childRoutes: [ { path: '/', component: AppLayout, childRoutes: [ require('./modules/shop/route'), //购买详情页 require('./modules/order/route'), // 订单页 require('./modules/login/route'), // 登录注册页 require('./modules/service/route'), // 服务中心 // ... // 其他大量新增路由 // ... ] } ] };
按该方式拆分后,每个业务模块维护自身的路由配置。新增业务模块路由,只需要在总的 rootRoute 中引入该业务模块的路由即可(也就是加一行代码)。这个方案看来是已经接近完美了。但如果想达到连一行代码都不用加?实现彻彻底底的去中心化管理
require.context 是什么?
想要彻彻底底的实现去中心化管理我们需要使用到 require.contextwebpack 官方文档的介绍require.context
简单说就是:有了 require.context,我们可以通过正则匹配引入相应的文件模块。
require.context(directory, useSubdirectories, regExp)
require.context 有三个参数:
directory:说明需要检索的目录
useSubdirectories:是否检索子目录
regExp: 匹配文件的正则表达式
使用 require.context 改造后的 rootRoute.js 文件
const rootRoute = { childRoutes: [ { path: '/', component: AppLayout, childRoutes: (r => { return r.keys().map(key => r(key)); })(require.context('./', true, /^\.\/modules\/((?!\/)[\s\S])+\/route\.js$/)) } ] };
优化后,新增一个业务模块,只要业务模块 route 文件遵循统一的目录结构。业务模块 route 就能被自动关联到 rootRoute 里。
查看示例代码
其他应用场景
这个思路可应用于其他想要实现"去中心化"管理的功能模块。模块化管理 reducer
转载出处: https://github.com/wuchangming/blog/blob/master/docs/webpack/require-context-usage.md
相关文章推荐
- react---react router4.0路由中如何异步动态加载组件,webpack使用require.ensure()生成异步chunk
- [原创]java WEB学习笔记55:Struts2学习之路---详解struts2 中 Action,如何访问web 资源,解耦方式(使用 ActionContext,实现 XxxAware 接口),耦合方式(通过ServletActionContext,通过实现 ServletRequestAware, ServletContextAware 等接口的方式)
- 使用spring实现事务管理(@transactional)的遇到的两个异常:java.lang.noclassdeffounderror:org/objectweb.asm
- ReactJS webpack实现JS模块化使用的坑
- CMS内容管理系统开发- Java Web开发及发布实例(2)—使用JSP实现动态数据交互
- windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- 使用AJAX实现Web页面进度条的实例分享
- windows下vue-cli及webpack 构建网站及 路由vue-router的使用
- 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- 使用webpack管理多页应用技巧总结
- Vue2.0与 [百度地图] 结合使用———vue+webpack+axios+百度地图实现组件之间的通信
- vue项目优化之按需加载组件-使用webpack require.ensure
- 【技术分享】手把手教你使用PowerShell实现一句话Web客户端
- Webpack-源码一,使用require加载并打包模块
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
- 使用webpack实现jquery按需加载
- webpack知识,在html里通过webpack使用commonJS规范,可以require各种包
- webpack的简单使用实现倒计时
- 使用scss + react + webpack + es6实现幻灯片
- vue项目优化之按需加载组件-使用webpack require.ensure