微前端项目

微前端项目

微前端的产生

当前项目多数都是spa单页应用，随着业务的发展一个项目在开发过程中越来越大。
这时会将一个项目拆分成多个子项目

SPA项目 router

router 主项目 组件目录 增长业务 => components/growth 市场投放 => components/market 市场拉新活动 => components/activity 用户学习业务 => components/user 用户激励 => components/coin 用户学习 => components/leaning 单页应用 router 主项目 组件目录

按业务拆分项目

从nginx将一个项目拆分成多个子项目。每个项目独立的存在，解决了web-main项目冗大的问题。但项目模块之间的通信变得复杂

nginx 增长业务 市场投放 市场拉新活动 用户学习业务 用户激励 用户学习 /growth => /data/nginx/growth /market => /data/nginx/market /activity => /data/nginx/activity /user => /data/nginx/user /coin => /data/nginx/coin /leaning => /data/nginx/leaning nginx 增长业务 市场投放 市场拉新活动 用户学习业务 用户激励 用户学习

微前端模块拆分项目

1. 从Nginx拆分项目

nginx classroom userCenter /classroom => /data/nginx/classroom /userCenter => /data/nginx/userCenter nginx classroom userCenter

2. 提取通用模块

nginx classroom pageLogin moduleBase moduleSnippet moduleClassroom 登录页面模块 基础共用包 工具包 教室模块 nginx classroom pageLogin moduleBase moduleSnippet moduleClassroom

nginx userCenter pageLogin moduleBase moduleFunctor moduleUserCenter 登录页面模块 基础共用包 工具包 学习中心模块 nginx userCenter pageLogin moduleBase moduleFunctor moduleUserCenter

3.微服务模块使用方式

Created with Raphaël 2.2.0 开始 package.json install ？ npm install 将依赖模块下载到node_modules build ？ npm run build 将依赖模块进行编译 编译内容产出到dist目录 结束 yes no yes no

4.微服务模块使用方式【微前端版】

Created with Raphaël 2.2.0 开始 kone.json 微服务配置文件 install ？ npm install 微前端模块? 将依赖模块下载 到node_modules build ？ npm run build 微前端模块? 通过kone.json 取得模块对应的资源清单 将依赖模块注入 编译内容产出到 dist目录 将依赖模块进行编译 结束 yes no yes no yes no yes no

微前端模块开发

前端模块生成

NPM包开发

npm包开发模式 NPM 包开发规范

NPM包发布

src目录下为原文件，产出dist目录下为UMD模块

NPM包发布【微前端版】

将dist 目录内的资源发布到CDN上，同时在Kone平台上建立包版本与资源列表之间的关系，在资源注入时会使用。

模块使用

npm install 将资源加载到本地node_modules目录下

模块使用【微前端版】

在项目编译时将依赖的模块按版本注入到HTML中。可以资源打包时间，同时增强模块的使用。

模块开发流程

Created with Raphaël 2.2.0 开始 模块开发 npm模块 开发完成？ 编译后产出dist目录 发布到npm私库 微服务? 记录静态资源列表与模块的关系 静态资源发布到CDN 结束 yes no yes no