フレームワークコードツールツールの生成 - Mitosis

序文

日常業務では、コンポーネントを作成するときに、バージョンアップグレード、テクノロジの移行、または外部コンポーネントのプロビジョニングについて、次のシナリオを考慮する必要がある場合があります。

vue2 アップグレード vue3
Vue3 が react に移行するか、react が vue3 に移行します
通常、外部から提供されるコンポーネントには、react と vue の 2 つのバージョンが含まれている必要があります。
システムにはさまざまなフレームワークが使用されています

通常であれば、react と vue の 2 つのバージョンを分析して実装する必要がありますが、両者の UI と対話の一貫性を確保するためには、それらを別々に維持する必要があり、必然的に作業負荷が増加します...

では、達成に役立つツールはありますか?一度書くと、同時に複数のフレームワークコードをコンパイルして出力できますか?

有糸分裂とは？

Mitosis は、一度コンポーネントを記述し、各フレームワークにコンパイルできるツールです. 非常にシンプルで、react に似た独自の構文セットを持っています. Mitosis で記述されたコンポーネントを見て、react、vue2、および vue3 コンポーネントにコンパイルしてみましょう同時に

Mitosis で書かれたコンポーネント

画像.png

まず、react、vue2、vue3、webcomponent タイプのコードに変換しましょう

画像.png

瞬時に飛び上がりました

飛ぼう！

インストール

npm install --save-dev @builder.io/mitosis-cli @builder.io/mitosis watch
复制代码

2.package.json を構成する

  "scripts": {
    "build": "npm run mitosis",
    "start": "watch 'npm run mitosis ./src ./overrides'"
  },
复制代码

構成完了構成

module.exports = {
   // 入口文件
   files: 'src/**',
   // 编译目标
   targets: ['vue2', 'vue3', 'react', 'webcomponent'],
   // 默认 output
   dest: 'overrides',
   exclude: []
};
复制代码

4.tsconfig.json を構成する

    "strict": true,
    "target": "es5",
    "jsx": "preserve",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "jsxImportSource": "@builder.io/mitosis"
复制代码

5.有糸分裂でPhoneNumberInputを実装する

/**
 * PhoneNumberInput component.
 */
import { useState } from '@builder.io/mitosis';

export default function PhoneNumberInput(props: any) {
	const [phone, setPhone] = useState('');

	function formatPhone(value: string): string {
		let val = value.replace(/\D/g, '');
		if (val.length > 10) {
			val = val.slice(0, 10);
		}
		if (val.length > 6) {
			val = `${val.slice(0, 6)}-${val.slice(6)}`;
		}
		if (val.length > 3) {
			val = `(${val.slice(0, 3)})${val.slice(3)}`;
		}

		return val;
	}

	return (
		<input
			type='tel'
			class='phone-number-input'
			data-testid='phone-number-input'
			placeholder='please input'
			value={phone}
			onChange={e => setPhone(formatPhone(e.target.value))}
		/>
	);
}
复制代码

6. npm run build を実行

構成されたターゲットのコードを生成する

コンポーネントの書き込み時に効果を表示する方法

Builder.io のJJS-lite フィドルで結果を可視化