前端统一编译多框架工具-Mitosis

Mitosis 是一个支持跨框架组件开发的开源项目。它允许你用一套语法编写组件，然后“编译”成多个主流框架的版本，包括但不限于：

• React
• Vue
• Angular
• Svelte
• Solid
• Qwik
• Alpine
• Shopify 的 Liquid 模板语言

其核心理念就是：不再重复劳动，前端开发一次搞定。

Mitosis 目前由 Builder.io 维护，已在 GitHub 上收获了超过 13k+ 的 Star，受到了众多开发者的关注和使用。

核心特点

Mitosis 不是在造轮子，而是让你把轮子开到更多地方去。来看几个它的“杀手锏”：

• 一次编写，多框架输出：统一组件代码，减少维护成本。
• 本地框架代码，而非 Web Components：比起笨重的 web components，Mitosis 直接生成框架原生代码，更易维护、更高性能。
• Figma 无缝对接：设计师的稿子，不用再靠“嘴对嘴”还原，Figma 自动生成组件不是梦。
• 输出代码可发布至 npm：输出后直接作为多框架组件库发布，满足企业级设计系统需求。

快速开始

只需一个命令，Mitosis 项目轻松起步：

npm create @builder.io/mitosis@latest

创建完成后，阅读生成项目中的 README.md，即可了解结构、构建与测试方法。

📘 官方文档传送门：https://mitosis.builder.io/docs

技术架构 & 实现方式

Mitosis 本身是一个编译器工具，支持将自定义语法（JSX-lite）转译为目标框架的组件代码。它使用 TypeScript 编写，开源贡献活跃。

• 主体语言：TypeScript（95% 以上代码）
• 使用 AST（抽象语法树）解析组件语法
• 支持框架插件机制，便于扩展更多目标平台
• 支持将 Figma 组件映射到 Mitosis 模板语法

🧪 提供了 Playground 和示例项目，供开发者试用和参考。

与 Figma 的集成亮点

配合 Builder.io 自家的 Figma 插件，你可以：

• 自动将设计组件转换为 Mitosis 组件
• 保持 Figma 与代码的双向同步
• 轻松构建统一的设计系统到代码工作流

对于设计、开发协作来说，这简直是“神器般”的存在。

仓库信息一览