大家好,我是馋嘴的猫,今天来给大家介绍一个最近新出的结构 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 类似,但不同点如下:
在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 对应代码复制至对应目录。 -
检查 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 打包后只会输出源码,默认情况下不能直接履行打包,比较繁琐。开发者可参照上面的组件库教程与github库房源码,完结在 Mitosis 输出源码后后主动进行打包操作。
好的,以上便是对如何运用 Mitosis 来建立前端组件库的悉数介绍啦!
欢迎多多点赞,有问题也欢迎在评论区交流~