EMP微前端 目前项目遇到的使用问题 以及微前端的一些问题整理和优化,目前订立更具象化的工程化内容如下:
1 emp-config.ts 引入 优化EMP配置方案 v1.8.0已完成
json exports
方式 代替 function exports
让配置更加语义化,更加直观的调用、需要向下兼容当前写法,逐步迁移
import {EMPConfig} from '@efox/emp-cli/types/emp-config'
import empVue3 from '@efox/emp-vue3'
import empSwc from '@efox/emp-swc'
//
const config: EMPConfig = {
webpackChain(config) {
config.devServer.port(8001)
},
// or
webpack() {
return {
devServer:{
port:8001
}
}
},
compile:[empSwc], // 利用 swc替代babel进行js编译
framework:[empVue3],// 支持vue3
moduleFederation: {
name: 'demo1',
filename: 'emp.js',
remotes: {
'@emp/demo2': 'demo2@http://localhost:8002/emp.js',
},
exposes: {
'./configs/index': 'src/configs/index',
'./components/Demo': 'src/components/Demo',
'./components/Hello': 'src/components/Hello',
},
shared: ['react', 'react-dom'],
},
}
export default config
类型介绍
declare interface EMPConfig {
/** webpack & webpack chain config method */
webpack?: (o: EmpConfigI & EmpConfigIBase) => WebpackOptionsNormalized | Promise<WebpackOptionsNormalized>
webpackChain?: (config: webpackChain, o: EmpConfigI) => void | Promise<any>
/** compile replace babel use swc or esbuild */
compile?: Array<any>
/** react vue svetle and more */
framework?: Array<any>
/** module federation config */
moduleFederation?: MFOptions
}
2 插件化接入EMP 讨论中
- 全局指令接入
- 业务、公司内部服务等定制模板命令行接入
- 自动化触发构建接入
3 远程基站(组件)类型自动同步 讨论中
- 可视化分析项目所引用的所有基站以及关联基站
- 自动同步外部基站类型文件
4 新可能性
- SSR服务实现零重启发布
完成初步实现,后续可增加STEAM FEDERATION概念
总结
目前 EMP项目已经大量引入到公司的各个项目团队、并且开始收效,欢迎参与讨论 提出您的宝贵意见,在使用中反馈问题