#介绍

#什么是 Esmx？

基于 ESM 与导入映射的工程化框架，同时支持 CSR/SSR 与模块链接能力，框架中立，适配多技术栈。

核心能力：

• 基于原生 ESM 的模块系统
• Import Maps（导入映射）管理依赖与版本
• RenderContext（渲染上下文）提供资源注入与顺序约束
• 支持 Vue/React 等框架的 SSR 与 CSR 实践

#为什么选择 Esmx？

#原生标准

• 使用标准 ESM 语法
• 通过 Import Maps 定义路径解析
• 依赖隔离与版本共存由标准机制实现

#框架中立

• 兼容 Vue、React、Preact、Solid、Svelte 等
• 组件与构建保持框架无关设计
• 渲染入口可按场景切换

#构建与部署

• 支持基础路径配置与钩子机制
• 适配多语言站点与微前端部署
• 与 Rspack 集成的工程化工作流

#核心概念

#ESM 模块系统

• 使用 import/export 标准语法
• 支持静态分析与按需加载
• 原生处理循环引用

#Import Maps（导入映射）

• 将模块标识映射到 URL
• 支持作用域与版本共存
• 可通过 es-module-shims 提供向后兼容

#模块链接

• 跨包共享与运行时链接
• 构建期与运行时协作
• 保持类型安全与工程约束

#应用隔离

• 模块作用域
• 样式与状态隔离
• 错误边界

#解决的问题

#传统微前端痛点

• 运行时注入带来额外开销
• 隔离依赖于自研沙箱
• 构建工具强耦合
• 部署策略复杂

#Esmx 的解决方案

• 使用 ESM 与导入映射管理依赖
• 通过模块作用域实现隔离
• 框架中立的渲染与构建

#对比

维度	传统方案	Esmx
运行时	依赖注入/沙箱	原生 ESM
隔离	自研沙箱	模块作用域
构建	特殊配置	标准流程
学习	框架特定 API	标准语法