用 Mitosis 来搭建一个多框架支持的前端组件库-六虎

大家好，我是馋嘴的猫，今天来给大家介绍一个最近新出的结构 Mitosis。

在这篇教程中，除了会介绍 Mitosis 是什么，如何运用 Mitosis，还会借助 Mitosis 结构的转换功用，来完结一个组件库项目，让开发者只需求写一次组件库源码，即可同步生成多个前端结构（React、Vue、Solid）的组件库代码。

是不是心动了？竟然有结构这么厉害，能够省咱们很多功夫来支撑不同前端结构，快来跟着教程一同学习一下吧～

Mitosis 是什么？

Mitosis 的主旨，便是为开发者供给一种办法，经过书写符合 mitosis 标准的 JSX 文件，装备需求打包的渠道（targets），运用 Mitosis cli 的 build 指令，即可生成指定渠道（React、Vue、Solid）的源代码。

开发者能够在不熟悉多种结构的语法的场景下，也能为它们供给源代码等级的支撑，这，便是 Mitosis 的独到之处。

在线 Mitosis 转换作用体会：mitosis.builder.io/

体会 Mitosis 的构建

为了便利开发者体会，我这儿现已将示例工程提交到 github 库房，能够克隆下来对照着下面教程观看。

现在，让咱们开端 mitosis 结构的引进和构建吧～

过程

新建项目，履行以下指令，为项目装置上对应的 mitosis 依靠。

# 这儿只列了mitosis的依靠，其他依靠可检查示例工程的package.json
pnpm add @builder.io/mitosis @builder.io/mitosis-cli 
pnpm add @builder.io/eslint-plugin-mitosis -D

在项目根目录新建一个mitosis.config.js的文件，开端书写 Mitosis 的装备。装备文档点此检查。

/** @type { import('@builder.io/mitosis').MitosisConfig } */
module.exports = {
    files: 'src/**',
    targets: ['solid', 'react', 'vue'],
    dest: "dist",
    options: {
        solid: {
            typescript: true,
            stylesType: 'styled-components'
        },
        react: {
            typescript: true,
            stylesType: "style-tag",
        },
        vue3:{
            typescript: true,
        }
    }
};

装备 tsconfig.json，加上对 Mitosis JSX 的支撑。

 // tsconfig.json关于mitosis的装备，完好文件可检查示例工程的tsconfig.json
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@builder.io/mitosis"
  }
}

新建 src 目录，在里面开端书写 Mitosis 支撑的 tsx/jsx 代码。留意，保存的时分扩展名有必要以.lite.tsx或.lite.jsx保存。

注：Mitosis JSX 与普通 React JSX 类似，但不同点如下：

语法限制：文档，可经过 mitosis 的 eslint 插件提醒来规避
Hooks：文档
组件规矩：文档

在src目录下，咱们新建一个image.lite.tsx，并填入以下内容。

//image.lite.tsx
interface ImageProps {
    style?: any;
    children?: any;
    onClick?: () => void;
    src: string;
}
export default function Image(props: ImageProps) {
    return (
        <img
            style={props?.style ?? {}}
            src={props.src}
            onClick={() => {
                props?.onClick?.()
            }}
        >
            {props.children}
        </img>
    );
}

在 package.json 增加 build 指令。

// package.json
"scripts":{
   "build": "rm -rf dist && mitosis build"
}

在项目根目录下履行pnpm build指令，由于在咱们刚刚的过程 3 中，装备了 targets 为['solid', 'react', 'vue']，因此，只要 build 指令成功履行，咱们即可在 dist 目录里，找到对应的三个结构的文件夹，生成的源码也在其中。

现在快打开看看，你的代码现已正确产出为对应渠道的代码了，是不是很奇特～

以下是 vue3 的源码文件：

//image.vue
<template>
  <img :style="style ?? {}" :src="src" @ click="onClick?.()" />
</template>
<script setup  lang="ts">
interface ImageProps {
  style?: any;
  children?: any;
  onClick?: () => void;
  src: string;
}
const props = defineProps<ImageProps>();
</script>

至此，咱们就完结 Mitosis 构建多端源代码的全流程了。

接下来，咱们将会结合 Mitosis 的能力，来建立一个多结构支撑的前端组件库。

建立组件库

在这个章节中，咱们将会聚集在，如何经过 Mitosis 完结 “写一次代码，输出多份结构源码和产品” 的需求。

相同，为了便利开发者体会，我也现已组件库工程提交到 github 库房，可先克隆下来，对照以下教程正文阅读。

项目大致目录结构如下，可对照源码检查。

|-- work
    |-- package.json
    |-- pnpm-workspace.yaml
    |-- examples  // 示例工程
    |   |-- react-demo   // React 项目
    |   |-- solid-demo   // Solid 项目
    |-- packages
        |-- mitosis-components   // Mitosis 源码与构建目录
            |-- mitosis.config.js
            |-- tsconfig.json    // Mitosis 构建的 ts 装备
            |-- src     // Mitosis tsx/jsx 源码位置
            |   |-- index.ts  
            |   |-- components
            |       |-- image.lite.tsx
            |       |-- index.ts
            |-- templates    // 结构源代码构建所需的npm依靠和ts装备文件
                |-- react
                |   |-- package.json
                |   |-- tsconfig.json
                |-- solid
                    |-- package.json
                    |-- tsconfig.json
                    |-- tsconfig.node.json

OK，废话不多说，让咱们先确定下组件库的目标。

目标

经过书写 Mitosis TSX，生成 React 和 Solid 的源代码与产品
新增 React 和 Solid 结构的示例工程，在各自项目中引证 Mitosis 转换生成的产品，并验证组件是否能正常运用

目标定好了，让咱们开端吧，完结过程如下：

过程

新建一个目录，复制 package.json 至项目的根目录，并新建 pnpm-workspace.yaml，填入以下内容。

// pnpm-workspace.yaml
packages:
  - packages/*
  - examples/*

履行pnpm install装置依靠。
在根目录新建 packages 目录，再在其下新建一个 mitosis-components 目录。

mkdir pacakges packages/mitosis-components

在 mitosis-components 目录新建 components 目录与一个 index.ts 文件

cd packages/mitosis-components
mkdir components
touch index.ts

在 components 目录下新建一个 image.lite.tsx，运用 Mitosis JSX 语法书写逻辑。详细内容可复制 github 库房源码

注：Mitosis JSX 语法与普通 JSX 类似，但文件需以.lite.tsx 结尾，详细规矩能够阅读文档了解。

在 components 目录新建一个 index.ts，导出 image 组件

// components/index.ts
export { default as Image } from './image.lite';

返回到 components 目录的上一级目录mitosis-components下，新建一个 index.ts，导出一切的 component 目录的组件

// mitosis-components/index.ts
export * from './components';

在 mitosis-components 目录下，新建一个 templates 目录，并新建两个目录：react 和 solid，从 github 库房复制对应的 package.json 和 tsconfig.json。

这个过程的意义：为后面生成的 React、Solid 源代码供给编译产品有必要的 npm 依靠与 tsconfig 装备。

复制 Github 库房的.eslintignore 与.eslintrc.js 与 package.json 代码至 mitosis-components 目录，为库房供给 eslint 检查功用与装备必要依靠（需履行指令 pnpm install 装置）。
这个时分，咱们现已完结 Mitosis 组件库源码库房的建立了。在 mitosis-components 目录，履行以下指令，开端构建源码。

pnpm generate:source

构建成功后，对应结构的源码能够在 mitosis-components 的 dist 目录下检查到。

注：能够看到，在过程 8 创立的 templates 目录下放置的 react 与 solid 目录的 package.json 和 tsconfig.json，在履行指令后也被同时复制了过来，为下一个过程的构建做准备。

回到咱们一开端的目标，咱们需求完结一个组件库，但直接供给源码给他人集成是一种不太好的办法。因此，咱们还需求打包为 js，再经过 npm 包的办法，供给一个完好的组件库，类似 Ant design，Element 等。

在根目录，履行以下指令，构建 js 产品。

pnpm bundle:all

构建成功后，对应结构的 js 产品与类型定义能够在 mitosis-components 的 dist 目录下检查。

此时，检查 mitosis-components 目录下的 package.json，能够看到已装备了 Solid 和 React 产品的 export 选项，完结了组件库的导出。

// package.json
"exports": {
  "./react": {
    "import": "./dist/react/dist/index.js",
    "types": "./dist/react/dist/types/index.d.ts"
  },
  "./solid": {
    "import": "./dist/solid/dist/index.js",
    "types": "./dist/solid/dist/types/index.d.ts"
  }
},

至此，咱们就完结了 Mitosis 组件库的一切部分代码。接下来，咱们需求在详细的项目中引证并体会作用了
在 examples 目录，新建solid-demo和react-demo，将 github 对应代码复制至对应目录。
1. solid-demo 源码：点此检查
2. react-demo 源码：点此检查
3. 复制完两个目录后，再在根目录下履行pnpm install装置依靠。
检查 react-demo/app/page.tsx，完结了 React 组件库 Image 组件的引进与运用，详细代码如下：

// page.tsx
import {Image as MitosisImage} from 'mitosis-component-library/react'
return (
    // 省掉其他视图代码
    <MitosisImage src={"/vercel.svg"}/>
)

在 react-demo 目录下履行指令pnpm dev，拜访http://localhost:3000，验证 Image 组件烘托成果，成果是彻底 ok 的～

检查 solid-demo/src/page.tsx，也完结了 Solid 组件库 Image 组件的引进与运用，详细代码如下：

// page.tsx
import {Image} from 'mitosis-component-library/solid';
return (
    // 省掉其他视图代码
    <Image src={solidLogo} style={{"width":"8em","height":"8em"}} />
)

在 solid-demo 目录下履行指令pnpm dev，拜访http://localhost:5173，验证 Image 组件烘托成果，成果也是彻底 ok 的～

至此，咱们完结了组件库在实践项目（React、Solid 结构）的验证。

总结

在以上的教程中，咱们完结了以下几点功用点：

经过 Mitosis-cli 合作 Mitosis tsx 文件的书写，完结了写一份组件代码，即可生成多个前端结构的组件源码。
经过 Mitosis 生成好的前端源码，再合作主动化的打包工序，生成对应结构的 js 产品，并以 npm 包的方式供给给其他开发者，完结了多结构支撑的前端组件库。
在示例项目中引证前端组件库的组件并展现，验证了多端组件的一致性。

Mitosis 在开发过程中，也是优缺陷兼有，开发者能够依据自己的需求选择是否采用。

长处

只需求写一次 Mitosis JSX，即能够支撑多达 20 多种结构源码输出，支撑的渠道可点此检查。
Mitosis 的打包装备十分完全，开发者能够自由装备比方语法格式（比方 Vue3 的 Options API 或 Composition API），样式库（Styled Component 或 Emotion CSS prop）等等，适合各种业务场景的需求。
在遇到尚未支撑的结构或结构新语法尚未被 Mitosis 官方支撑时，能够依据官方文档完结定制 Plugin，或者 fork mitosis 库房完结新的 generator（因 Mitosis 官方暂无供给手动装备新 generator 的办法）

缺陷

为了适应多种结构，Mitosis JSX 语法限制较多，在运用时能够合作 eslint 插件提示，参考文档。
Mitosis 打包后只会输出源码，默认情况下不能直接履行打包，比较繁琐。开发者可参照上面的组件库教程与github库房源码，完结在 Mitosis 输出源码后后主动进行打包操作。

好的，以上便是对如何运用 Mitosis 来建立前端组件库的悉数介绍啦！

欢迎多多点赞，有问题也欢迎在评论区交流～

用 Mitosis 来搭建一个多框架支持的前端组件库

Mitosis 是什么？

体会 Mitosis 的构建

过程

建立组件库

目标

过程

总结

长处

缺陷

作者信息

推广

用 Mitosis 来搭建一个多框架支持的前端组件库

Mitosis 是什么？

体会 Mitosis 的构建

过程

建立组件库

目标

过程

总结

长处

缺陷

相关文章

前端：写在 30 岁之前

Go1.21 速览：Context 可以设置取消原因和回调函数了，等的可太久了！

visionOS 开发 – ImmersiveSpace API

年终杂感：从算法到前端，我的六年码龄

作者信息

推广