Mitosis大火？Angular/React/Vue/Svelte等框架公用利器？

大家好，很高兴又见面了，我是”前端‬进阶‬”，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

Mitosis：单组件编译成Vue、React、Solid、Angular、Svelte等框架代码的利器1.什么是Mitosis？Mitosis 是一个编译时框架，允许您在 JSX 中编写组件并编译为 vanilla JavaScript、Angular、React、Vue 等。

Mitosis 使用 JSX 的静态子集，灵感来自 Solid 这意味着可以将其解析为简单的 JSON 结构，然后构建为针对各种框架的序列化程序Mitosis可能与 Ionic 团队使用 Stencil 所做的工作非常相似。

一个主要区别是Mitosis不只是输出组件，而且可以编译成各个框架代码， 甚至可以编译为 Stencil截至 2022 年 4 月，Builder.io 的 Mitosis 支持包括几乎所有主流框架代码：

VueReactAngularSvelteReact NativeSwiftSolidJsStencilWeb ComponentsHTMLLiquidTemplate LiteralsJSONBuilder (JSON)

2.Mitosis与其他编译时框架相比如何？两个非常流行的编译时框架是 Svelte 和 SolidJS Mitosis 与其非常相似，因为它也是一个编译时框架，而且非常快 它的不同之处在于允许生成多个框架，从而实现最大的灵活性。

SolidJS：用于构建用户界面的简单且高效的响应式框架与 SolidJS 类似，Mitosis 使用将组件编译为 JSON 的 JSX 版本 然后插件将组件编译到不同的目标，使您能够在两个过程中创建工具：。

可以转换成JSON 的代码将 JSON 编译或序列化为目标框架的插件3.为什么使用Mitosis？Mitosis是一种非常强大和灵活的工具 到目前为止，已经确定三大典型场景可以从中受益3.1 设计系统维护者。

如果您是从一个 Web 框架开始的设计系统库的维护者，那么在为后续框架创建新版本时，您会感受到巨大的维护痛苦和重复劳动3.2 使用多个 Web 框架的团队如果您所在的团队使用了多个不同的Web前端框架，那么在所有前端之间协调设计系统以获得好的开发体验绝对是一场噩梦。

Mitosis 是消除此类问题的出色工具，因为它允许您在组件中定义一次设计并将它们部署到所有单独的前端框架3.3 构建 Web SDK 的团队如果您的团队正在为直接集成到 Web 框架并涉及向最终用户提供组件的产品构建 SDK，那么 Mitosis 非常适合您的团队。

4.如何使用Mitosis4.1 如何安装 CLI打开终端并执行以下命令来安装 CLI：npm install -g @builder.io/mitosis-cli可以运行 mitosis –help，命令将展示具体用法和示例。

USAGEmitosis compile –to= [options] [files]mitosis compile -t= [options] [files]If no [input-files] are specified or when [files] is “-“, inputis read from standard input.EXAMPLESmitosis compile -t react component.tsxmitosis compile -t react < component.tsxcat component.tsx | mitosis compile -t html -mitosis compile -t react –out-dir build — src/**/*.tsx

记住 Mitosis只是编译器，仍然需要创建代表组件的 JSX 文件，然后 Mitosis 将输出这些文件4.2 如何创建Mitosis项目首先创建一个新目录并切换：mkdir mitosis-example && cd mitosis-example。

创建一个 npm 项目，以便使用 @builder.io/mitosis 包：npm init -y强烈建议使用 git 初始化此目录：git init将 Builder.io Mitosis 包安装到本地项目中：

npm install @builder.io/mitosis添加 JSX Mitosis文件文件名应以 lite.jsx 结尾touch component.lite.jsx在 VSCode 中打开项目：

code .项目在 VSCode 中有如下结构：

将 JSX 添加到 component.lite.jsx 文件中：import { useState } from “@builder.io/mitosis”;export default function MyComponent(props) {const [name, setName] = useState(“Alex”);return (

setName(event.target.value)}/>Hello! I can run in React, Vue, Solid, or Liquid!状态比较在将 component.lite.jsx 输出为其他语言之前，请仔细查看状态的使用方式。

useState 钩子与您在 React 中的使用方式相同 您可以在下面看到一些框架以及它们如何使用此定义为每个输入适当地分配状态变量setName(event.target.value)}在 JSX 中使用的状态变量名称在下面的其他框架中已正确编译。

AngularSvelteVue5.总结本文主要和大家介绍下一个优秀的编译时框架Mitosis因为笔者也没有在生产项目中使用、部署过Mitosis，所以很多探索也就浅尝辄止，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。

参考资料https://github.com/BuilderIO/mitosishttps://www.builder.io/blog/mitosis-a-quick-guidehttps://solid.redwoodjs.cn/