1. Mitosis从0到1，一次性开发组件库，通用多个主流框架

Write components once, run everwhere

Mitosis是Builder.io出的一个JavaScript框架，是用来开发js库的库。Builder.io是一家专门做低代码平台的网站，通过拖拽搭建网页，类似于阿里的低代码引擎，不过Builder.io要高级不少，不仅功能全面，做工也非常精良，当然人家收费也不低，我记得最少一个月$90（美元）。 Mitosis的功能在于，你可以只需要开发一次，就可以编译成以下各种不同框架：

• Vue
• React
• QWik
• Angular
• Svelte
• React Native
• RSC
• Swift
• Solid
• Stencil
• Marko
• Preact
• Lit
• AlpineJS
• WebComponents
• HTML
• Liquid
• Template
• JSON
• Builder（Builder.io自家框架）

在Mitosis的在线编辑器里试玩了一下，确实惊艳到我了，开始本地试用啦。

第一步 安装命令

全局安装npm包 npm install -g @builder.io/mitosis-cli。

这样你就可以使用mitosis的命令了。运行mitosis --help可以查看如何使用命令。

第二步 创建项目

新建项目文件夹，在文件夹中初始npm npm init。

项目内部再局部安装npm包 npm install @builder.io/mitosis-cli。

在根目录下创建文件component.lite.jsx，在里面写一个组件如下：

    import { useState } from "@builder.io/mitosis";

    export default function MyComponent(props) {
        const [name, setName] = useState("Alex");

        return (
            <div>
            <input
                css={{
                color: "red",
                }}
                value={name}
                onChange={(event) => setName(event.target.value)}
            />
            Hello! I can run in React, Vue, Solid, or Liquid!
            </div>
        );
    }

如果你以前写过React，Mitosis这样的写法对你也会很熟悉。

第三步 编译

在根目录下创建文件夹output，并运行命令mitosis compile --to=react component.lite.jsx > output/component.jsx，你马上就可以在ouput里看到如下图编译后的文件啦： 命令中的--to=是设置你想要编译成哪种框架，你也可以把react改为angular，svelte，vue等。

如果你因为各种因素没能全局安装Mitosis的npm包（比如没有admin权限修改文件夹内容），还可以使用这个命令：npm exec mitosis compile --to=react component.lite.jsx > output/component.jsx

下一篇，我们将了解Mitosis的工作原理：Mitosis是如何做到通过一次性开发，可以通用多种主流前端框架的？

参考

Mitosis可以减少团队开发公共库的重复工作，详细文档参考：Mitosis文档。
完整的案例参考：github.com/codercatdev…。
本章节引用：www.builder.io/blog/mitosi…。