使用 webpack 的 require.context 实现路由“去中心化”管理
2018-07-13 15:57
337 查看
阅读须知:示例代码以 react-router V3 为例。其他路由同样适用,如:vue-router。同样其他的功能模块也可以用该思路进行相应的去中心化管理改造。
本文示例代码
一个项目中路由的变化过程
当你在开发一个大型单页面应用的时候,项目之初一般做法是所有的路由规则都维护在一个
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.context
webpack 官方文档的介绍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阅读更多
相关文章推荐
- 分享:使用 webpack 的 require.context 实现路由“去中心化”管理
- react---react router4.0路由中如何异步动态加载组件,webpack使用require.ensure()生成异步chunk
- 在webpack中使用code splitting 实现按需加载
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&引用jquery来实现alert
- 使用webpack的动态模块功能实现类似包扫描来简化配置
- MyBatis+JUnit测试Dao(Mapper)的用例实现( 不启动web工程 且 未使用SpringMVC管理MyBatis时 )
- [原创]java WEB学习笔记55:Struts2学习之路---详解struts2 中 Action,如何访问web 资源,解耦方式(使用 ActionContext,实现 XxxAware 接口),耦合方式(通过ServletActionContext,通过实现 ServletRequestAware, ServletContextAware 等接口的方式)
- 详解windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- 使用express、react、webpack打包、socket.io、mongodb、ant.design、less、es6实现聊天室
- vue项目优化之按需加载组件-使用webpack require.ensure
- 使用webstorm+webpack构建简单入门级“HelloWorld”的应用&&构建使用jquery来实现
- windows下vue-cli及webpack 构建网站及 路由vue-router的使用
- 在webpack中使用Code Splitting--代码分割来实现vue中的懒加载
- vue项目优化之按需加载组件-使用webpack require.ensure
- 使用webpack实现jquery按需加载
- CMS内容管理系统开发- Java Web开发及发布实例(2)—使用JSP实现动态数据交互
- 使用scss + react + webpack + es6实现幻灯片
- vue项目优化之按需加载组件-使用webpack require.ensure
- windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用
- vue项目优化之按需加载组件-使用webpack require.ensure