EMP 下一代微前端解决方案 V1.8.0 工程化推进

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({webpackConfig}) {
    webpackConfig.devServer.port = 8001
    return webpackConfig
  },
  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项目已经大量引入到公司的各个项目团队、并且开始收效，欢迎参与讨论 提出您的宝贵意见，在使用中反馈问题