EMP微前端分享内容回顾(中)

咱们团队在早早聊的B站直播间分享了EMP微前端,内容比较丰富,分为三篇文章阐述,欢迎关注EMP库后续。 这篇文章主要讲EMP的是生态搭建和使用体验。html

继上一篇前端

EMP微前端分享内容回顾(上)react

生态打造

从上图能够看出,底部是EMP的生态系统,里面主要有emp-cli脚手架、格式规范插件、ts辅助插件等,后面完善了更多的场景demo和插件,推荐能够上emp库的demo例子学习:webpack

https://github.com/efoxTeam/emp/tree/main/projectsgit

基于这些脚手架生态,上层的使用设计也有必定的技巧。比较推荐的使用方式是,能够搭建一个应用基站,基站内部能够放置多个项目的共享资源(组件、模块、方法等),这些共享资源放在基站,可让专门的几我的维护,确保稳定性和可靠性。其余的业务项目,好比图中的APP1和APP2,可使用基站资源。github

另外,其实APP1和APP2项目直接,也是能够进行资源共享的。web

下面是EMP生态的主要脚手架工具和插件列表:(后面不止了)工具

看过源码的朋友,能够看到efoxTeam/emp库中的emp-cli脚手架,是使用了lerna进行管理的,这种管理方式比较清晰明了,能够在project中并行执行多个项目。post

@efox/emp-cli脚手架是其中比较重要的一部分,能够从上图看到,目前emp是基于webpack5执行的,利用了webpack的chain特性,从全局项目的emp.config.js文件中读取配置,来执行dev、build等命令。能够看到命令中有emp tsc这种更新远程d.ts声明文件的命令,这也是下面要提到的ts规范:学习

使用ts其实能够带来上图比较多的好处,对于一个团队的规范来讲,是友好的。因此emp是推荐你们使用ts的。

像上图使用ts后,在业务项目中,只要执行了emp 的同步远程的声明文件( emp tsc)的命令,就能够在引入组件的时候,知道组件须要传什么参数,返回什么参数了。

经过emp脚手架命令,还有emp-yune-dts-plugin插件的辅助,就能够将多项目之间的声明文件彼此同步,提高团队协做的规范性。

使用体验

首先,咱们能够来一个简单的demo体验。咱们以react项目为demo,分别执行命令emp init建立两个项目:react-basereact-project

咱们能够看到,react-basereact-project两个项目下,都有一个配置文件:emp-config.js。

咱们细看emp-config.js配置文件里面的内容,其中在webpack chain中,使用了mf插件,主要的字段如图所示。

同时在在webpack chain中,使用了html插件,便于引入其余应用资源入口。

咱们整理了一系列的emp教程文章,能够看wiki列表:

https://github.com/efoxTeam/emp/wiki

值得期待的是,为了下降使用门槛和便于管理,咱们如今正在开发GUI可视化工具。

这是GUI的项目列表图。

GUI新建项目,会调用emp init命令去建立对应模板。

这是项目仪表盘,便于管理单个项目。

单个项目可能引入多个基站,能够引入基站、查看基站列表和详细信息:

GUI很快就能够和你们见面啦,敬请期待!!!

后续:

EMP微前端分享内容回顾(下)

相关文章
相关标签/搜索