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

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 支持包括几乎所有主流框架代码：

• Vue
• React
• Angular
• Svelte
• React Native
• Swift
• SolidJs
• Stencil
• Web Components
• HTML
• Liquid
• Template Literals
• JSON
• Builder (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.如何使用Mitosis

4.1 如何安装 CLI

打开终端并执行以下命令来安装 CLI：

 npm install -g @builder.io/mitosis-cli

可以运行 mitosis --help，命令将展示具体用法和示例。

USAGE
    mitosis compile --to= [options] [files]
    mitosis compile -t= [options] [files]

    If no [input-files] are specified or when [files] is "-", input
    is read from standard input.

  EXAMPLES
    mitosis compile -t react component.tsx
    mitosis compile -t react < component.tsx
    cat 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 中使用的状态变量名称在下面的其他框架中已正确编译。

Angular

Svelte

Vue

5.总结

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

参考资料

https://github.com/BuilderIO/mitosis

https://www.builder.io/blog/mitosis-a-quick-guide

https://solid.redwoodjs.cn/