ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Midway 组件机制实战:使用与开发可复用扩展组件

Midway 组件机制实战:使用与开发可复用扩展组件 后端微服务云原生【免费下载链接】midway A Node.js Serverless Framework for front-end/full-stack developers. Build the application for next decade. Works on AWS, Alibaba Cloud, Tencent Cloud and traditional VM/Container. Super easy integrate with React and Vue. 项目地址https://gitcode.com/gh_mirrors/mi/midway点击查看免费下载组件是 Midway 的核心扩展机制它把可复用的业务代码与通用能力如配置、生命周期、拦截器、ORM、Swagger 等抽象为独立的代码包让同一份能力能够在所有 Midway 场景Web 应用、Serverless 函数、多框架项目中反复复用。本文将以midwayjs/validation、midwayjs/info等真实组件为例完整讲解组件的结构、如何在src/configuration.ts中启用组件、如何按环境条件启用组件并结合 packages/core 源码剖析组件加载的底层原理读完即可在自己的 Midway 项目中自如地接入与管控组件。组件是什么Midway 将扩展能力统一抽象为“组件”Component。凡是需要跨项目复用的业务代码或公共能力都可以封装成组件使这些代码能够在所有 Midway 场景下复用。典型的组件场景包括包装下游调用、简化三方模块使用例如 ORM 数据库调用、Swagger 文档生成、参数校验等沉淀可复用的业务逻辑例如公共的 Controller、Service、拦截器、中间件等。从 v3 开始框架Framework本身也成为了组件的一部分使用方式与普通组件保持统一——可以说应用本身就是一个“大组件”。这一设计让组件化贯穿了 Midway 的整个体系项目依赖、启动入口、生命周期、配置加载都遵循同一套约定。组件结构入口与 Configuration普通项目本身也是一个组件。组件的入口文件一般是src/index.ts或者src/configuration.ts其中会导出一个带有Configuration装饰器的类// 应用或者函数的 src/configuration.ts import { Configuration } from midwayjs/core; Configuration({ // ... }) export class MainConfiguration {}Configuration装饰器定义在 packages/core/src/decorator/common/configuration.ts从源码可以看到它做了三件事将namespace默认设置为MAIN_MODULE_KEY即应用主模块命名空间通过MetadataManager.defineMetadata将配置选项写入CONFIGURATION_KEY元数据同时为被装饰的类追加Singleton作用域和Provide标记使其进入依赖注入容器管理。也就是说Configuration不只是声明它同时完成了类的注册与元数据的收集是组件能够被框架识别与加载的关键。启用组件组件一般以 npm 包形式复用每个组件都是一个可以被直接require或import的代码包。下面以midwayjs/validation参数校验组件为例演示完整接入流程。首先在应用中加入依赖// package.json { dependencies: { midwayjs/validation: ^4.0.0 } }然后在代码中启用该组件。Midway 的组件加载能力设计在src/configuration.ts文件中通过Configuration的imports属性传入组件对象// 应用或者函数的 src/configuration.ts import { Configuration } from midwayjs/core; import * as validation from midwayjs/validation; Configuration({ imports: [validation], }) export class MainConfiguration {}imports是数组支持同时引入多个组件例如Configuration({ imports: [validation, swagger, orm], }) export class MainConfiguration {}imports 支持的其他导入方式从 packages/core/src/interface.ts 中InjectionConfigurationOptions的定义可见imports数组的每一项可以是IComponentInfo带enabledEnvironment等控制信息的组件对象见下文“不同环境启用组件”{ Configuration: ClassType }一个导出了Configuration属性的组件包对象FunctionalConfiguration函数式functional写法下的配置对象。除此之外Configuration还支持importConfigs引入配置、importObjects注册对象、importConfigFilter配置过滤器、namespace命名空间与detector文件探测器等选项组件的配置与生命周期能力由此得以完整注入主应用。不同环境启用组件有些组件只需要在特定环境下生效例如本地开发时才需要的信息展示组件midwayjs/info用于输出当前环境、路由等信息出于安全考虑生产环境通常应关闭。此时imports属性可以传入对象数组在对象中针对组件启用的环境进行配置// 应用或者函数的 src/configuration.ts import { Configuration } from midwayjs/core; import * as info from midwayjs/info; Configuration({ imports: [ { component: info, enabledEnvironment: [local], }, ], }) export class MainConfiguration {}其中两个关键字段的语义如下component指定组件对象组件对象必须包含一个Configuration导出的属性enabledEnvironment组件启用的环境数组数组中的环境名与当前运行环境匹配时组件才会被加载。IComponentInfo接口在 packages/core/src/interface.ts 中有明确约束component为导出了Configuration属性的类或函数式配置enabledEnvironment为字符串数组。环境判断的底层原理环境过滤并非魔法其逻辑位于组件加载器 packages/core/src/context/componentLoader.ts 的addImports方法中。当imports中的某一项带有component字段时加载器会先检查该项是否配置了enabledEnvironmentif ((importPackage as IComponentInfo)?.enabledEnvironment) { if ( (importPackage as IComponentInfo)?.enabledEnvironment?.includes( this.container.get(MidwayEnvironmentService).getCurrentEnvironment() ) ) { this.load((importPackage as IComponentInfo).component); } } else { this.load((importPackage as IComponentInfo).component); }也就是说配置了enabledEnvironment的组件只有当前环境命中数组中的任意一个环境名时才会真正加载未配置该字段的组件则无条件加载。当前环境由MidwayEnvironmentService.getCurrentEnvironment()提供见 packages/core/src/service/environmentService.ts其值最终来自运行时的环境判断工具支持local、test、prod等环境约定。因此enabledEnvironment: [local]意味着仅在本地开发环境加载该组件生产环境自动跳过。组件加载流程的源码级解析理解组件如何被“装入”应用有助于排查组件不生效的问题。核心类是 packages/core/src/context/componentLoader.ts 中的ComponentConfigurationLoader其加载流程如下查找 Configuration 导出getConfigurationExport会从模块导出中筛选出带有Configuration元数据的类支持一个模块导出多个配置的情况数据交给第一个保存防重复加载通过loadedMapWeakMap记录已加载的配置类命中即跳过防止组件循环引用导致死循环读取配置元数据优先读取函数式写法的CONFIGURATION_OBJECT_KEY元数据否则读取普通类写法的CONFIGURATION_KEY元数据处理配置选项依次调用addImports加载 imports 中的子组件、addImportObjects注册 importObjects、addImportConfigs合并 importConfigs 配置、addImportConfigFilter注册配置过滤器并执行detector探测器保存模块并绑定容器通过DecoratorManager.saveModule保存配置模块信息最后bindClass将配置类绑定到容器绑定到对应的namespace。值得注意的是imports中如果直接传入字符串加载器会通过require自动解析见 componentLoader.ts因此除了import * as xxx的写法外也支持以包名字符串的方式声明依赖。整个加载过程同时提供异步load与同步loadSync两种形式以适应不同的启动时序。真实组件入口示例midwayjs/info以文档示例中的info组件为例其真实入口 packages/info/src/configuration.ts 展示了标准组件的形态import { Configuration, Inject, MidwayApplicationManager, } from midwayjs/core; import { InfoMiddleware } from ./middleware/info.middleware; import * as DefaultConfig from ./config.default; Configuration({ namespace: info, importConfigs: [ { default: DefaultConfig, }, ], }) export class InfoConfiguration { Inject() applicationManager: MidwayApplicationManager; async onReady() { this.applicationManager .getApplications([koa, faas, express, egg]) .forEach(app { app.useMiddleware(InfoMiddleware); }); } }从这个组件可以学到组件开发的关键模式通过namespace声明自己的命名空间避免与其他组件同名冲突通过importConfigs引入自己的默认配置config.default.ts通过实现生命周期方法如onReady在应用就绪时注入中间件通过Inject()获取MidwayApplicationManager等容器内对象从而面向多框架koa / faas / express / egg统一生效。继续深入组件开发本文聚焦于组件的“使用”若希望把公共能力沉淀为组件并发布成 npm 包可阅读仓库中的 组件开发文档。其中要点包括组件结构与应用保持一致src/index.ts导出、src/configuration.ts配置入口、通过namespace隔离作用域、尽量只依赖midwayjs/core以面向所有上层框架场景以及通过npm init midwaylatest -y脚手架选择component-v4模板快速生成示例组件。小结组件是 Midway 复用的核心载体应用本身也是一个组件入口统一为src/configuration.ts中带Configuration装饰器的类在Configuration的imports数组中直接引入组件 npm 包即可启用组件需要环境隔离时将 imports 项改写为{ component, enabledEnvironment }对象组件仅会在指定环境下加载底层由ComponentConfigurationLoader统一解析元数据、防重复加载、递归处理子 imports并通过MidwayEnvironmentService判断当前环境理解这些实现细节能帮助你在真实项目中精准控制组件行为。掌握这套组件机制后你就可以像搭积木一样组合 Midway 官方组件与自研组件让业务代码与通用能力清晰分层、跨项目复用。赞分享后端微服务云原生【免费下载链接】midway A Node.js Serverless Framework for front-end/full-stack developers. Build the application for next decade. Works on AWS, Alibaba Cloud, Tencent Cloud and traditional VM/Container. Super easy integrate with React and Vue. 项目地址https://gitcode.com/gh_mirrors/mi/midway点击查看免费下载相关推荐AXWebViewController导航模式全攻略微信风格与工具栏模式切换技巧AXWebViewController导航模式全攻略微信风格与工具栏模式切换技巧 AXWebViewController是一款专为iOS平台设计的轻量级网页浏React Native组件化开发实战构建可复用UI组件库React Native组件化开发实战构建可复用UI组件库 引言组件化开发的痛点与解决方案 你是否还在为React Native项目中重复编写相似UI代码而移动开发原生移动跨平台前端cocotb扩展开发指南构建可复用的硬件验证组件cocotb扩展开发指南构建可复用的硬件验证组件 概述 cocotb作为一个强大的硬件验证框架允许工程师使用Python编写测试平台来验证硬件设计。但在实际测试硬件开发上一篇Cursor Pro无限使用解决方案开源工具实现AI编程助手永久免费下一篇终极Adobe Illustrator脚本集合20免费工具彻底改变你的设计工作流创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表