アプリ間の反応コンポーネントをBITと共有する方法

ビット：反応成分を効率的に共有するための強力なツール

この記事では、プロジェクト、特に反応コンポーネント間のコード共有効率を大幅に改善できるオープンソースツールであるBITを紹介します。開発者は、BITを使用してコードベースの一部を共有し、他のプロジェクトでそれらを使用して、コードベースを分割したり、ソースコード構造を変更せずに変更を簡単に同期させることができます。

BITの中心的な利点は、プロジェクトのファイルシステムから共有コードの表現を切り離すことです。つまり、構造やソースコードを変更せずに、プロジェクトから共有してエクスポートしたいコンポーネントをBITを指定できることを意味します。共有されると、これらのコンポーネントはお気に入りのパッケージマネージャーを使用してインストールでき、プロジェクト環境で変更および更新できます。

BITには、共通の特性を持つ共有コンポーネントのコレクションである「Scopes」と呼ばれる機能も提供されます。これにより、発見可能性が向上し、プロジェクト全体で使用されるコンポーネントが明確に提示されます。 BITは、開発時間を大幅に短縮し、プロジェクト間の一貫性を確保し、コンポーネントのメンテナンスと更新を改善できます。

コンポーネントERA

ReactのようなUIコンポーネントのフレームワークにより、UIを独立して開発および使用できる独立した再利用可能なコンポーネントに分割できます。したがって、反応コンポーネントは、多くの場合、複数のプロジェクトとアプリケーションで調整および再利用できます。

作業を繰り返したり、ホイールを再発明したりするのではなく、コンポーネントのモジュール性と再利用性を活用してプロジェクト間で共有します。

BITは、GITおよびNPMと組み合わせてコード共有を加速し、コードベースの分割と複数のパッケージの変更の余分なオーバーヘッドを削減するために機能するオープンソースプロジェクトです。既存のリポジトリの一部を簡単に共有し、他のプロジェクトで使用し、変更を簡単に同期できます。

コンポーネント共有の難しさ

8つの再利用可能なコンポーネント（SRC/コンポーネントディレクトリにある）を含むReactアプリケーションを検討します。その一部はグローバルスタイルも使用しています。これらのコンポーネントのいずれかを別のアプリケーションで使用する場合、BITが表示される前に、主なアプローチはリポジトリを分割し、新しいリポジトリを作成し、必要なすべての構成（ビルドおよびテスト環境を含む）を追加し、パッケージを公開することです。 8つのコンポーネントの場合、このプロセスは8回繰り返す必要があり、コードの複製も引き起こします。最終的には9つのリポジトリが維持され、それらの間に変更が加えられます。

lernaは役立ちますが、プロジェクトコードベースをモノレポにリファクタリングすることを強制します。それでも、アプリケーション内のこれらすべてのパッケージの設定と依存ツリーの手動での定義とメンテナンスが必要です。さらに、これらのパッケージはすべて不十分であるため、採用がさらに困難になります。この余分なオーバーヘッドに直面して、ほとんどの人はコードをコピーして貼り付けることを選択することになりますが、これは非常に悪い練習です。

bit

で反応コンポーネントを共有します

ビットは、反応コンポーネントをほとんど余分なオーバーヘッドで共有する最速の方法です。

BITでは、コードベースを複数のリポジトリに分割する必要はありませんが、既存のリポジトリからコンポーネントを簡単に共有し、NPMを使用して他のリポジトリやプロジェクトで使用することができます。

BITの中心的なアイデアは、プロジェクトのファイルシステムから共有コードの表現を分離することです。したがって、実際にその構造コードやソースコードを変更することなく、プロジェクトから共有してエクスポートするコンポーネントを少し指すことができます。共有したら、お気に入りのパッケージマネージャーを使用してコンポーネントをインストールできます。

BITのもう1つの利点は、複数のリポジトリで見つかった実際のソースコードを追跡することです。そのため、コンポーネントのコードを簡単にインポートして他のプロジェクトから変更して、BIT同期を使用することもできます。変化。

ビットは、実際のファイル構造からコンポーネントの表現を分離し、ファイルのファイルまたはサブセットを再利用可能なコンポーネントにすばやく変換できるようにすることにより、ソースコードのコンポーネントを追跡します。単純なグローブパターン（以下に示すように）を使用して、ソースコード自体やファイル構造を変更せずに、ライブラリまたはプロジェクト全体のコンポーネントをすぐに共有できます。

任意のコンポーネントは、アプリケーションまたはプロジェクトのみで共有、発見、使用できます。また、プロジェクト環境で変更および更新することもでき、自分のプロジェクトからコンポーネントを更新させるかどうか、およびどのようにするかを選択できます（逆も同様です）。

共有コンポーネントは「スコープ」に結合できます。これは、一般的な属性を共有する単一のコンポーネントの「プレイリスト」と見なすことができます。 Free Bit Community Centerを使用する場合、各コンポーネントには、表示される視覚効果、テスト結果、半自動化されたドキュメントなどが表示されます。

コンポーネントをインストールするためにどのツールが使用されていても、依存図とプロジェクト間で使用されるコンポーネントを明確に理解することを完全に制御できます。共有コードは、同じコンポーネントが異なるプロジェクトで繰り返し実装されている場合に変更を簡単に制御できるため、UIを設計原則に合わせるのにも役立ちます。

クイックスタート

以下は、プロジェクトディレクトリ構造のボタン、ログイン、ロゴUIコンポーネントを共有する方法の例です。

<code>$ tree
.
├── App.js
├── App.test.js
├── favicon.ico
├── index.js
└── src
    └── components
        ├── button
        │   ├── Button.js
        │   ├── Button.spec.js
        │   └── index.js
        ├── login
        │   ├── Login.js
        │   ├── Login.spec.js
        │   └── index.js
        └── logo
            ├── Logo.js
            ├── Logo.spec.js
            └── index.js

5 directories, 13 files</code>

最初に、ビットをインストールしてプロジェクトの初期化：

<code>npm install bit-bin -g
cd project-directory
bit init</code>

これらのコンポーネントを追跡するためにビットを使用します。ビルド環境とテスト環境を追加することを忘れないでください。

<code>bit add src/components/* # 使用glob模式跟踪多个组件，或使用单个路径跟踪单个组件。</code>

ビットを使用してバージョンをロックし、依存関係を定義します。

次に、コンポーネントをリモートスコープに共有します：

<code>$ bit tag --all 1.0.0
3 components tagged | 3 added, 0 changed, 0 auto-tagged
added components:  components/button@1.0.0, components/login@1.0.0, components/logo@1.0.0</code>

$ bit export username.scopename # 将组件共享到此Scope exported 3 components to scope username.scopenameフラグを使用して、ソースコードからエクスポートされたコンポーネントを削除し、パッケージ依存関係としてプロジェクト

ファイルに追加できることに注意してください。 --eject package.jsonそれだけです。これで、NPMとYARNを使用してコンポーネントをインストールするか、BITを使用して、プロジェクトからコードを簡単に編集および更新できます。

ここで使用を開始できます：[ビット公式Webサイトリンク]（ビット公式Webサイトリンクはこちらに挿入する必要があります）

プロジェクトに変更を加えます

変更する必要があるコードコンポーネントを使用している場合は、BITを使用してコンポーネントをインポートし、プロジェクトのコンテキストで直接変更し、共有できます。 ejectフラグを使用して、プロジェクトのパッケージ依存関係にコンポーネントをポップすることもできます。

これらのプロジェクトでコードが実際に生成されたとしても、BITはさまざまなプロジェクト間でソースコードの変更を追跡および同期できることに注意してください。必要に応じて、複製せずに「制御されたコピーパステ」と考えることができます。

最適

ビットは、おそらく、最小限の追加コストでReactコンポーネントを共有する最速の方法です。 BITを使用すると、コピーのコピーや貼り付けを避け、さまざまなアプリケーションで使用しながらコンポーネントを変更して維持しやすくすることができます。

チーム全体が範囲内のすべてのコンポーネントを整理し、さまざまな場所で使用するためにさまざまなバージョンを作成できます。新しいチームメンバーは、これらのコンポーネントを簡単に発見し、すでに書いた既存のコードで作業に参加できます。

BITは、開始したり、フィードバックを与えたり、好きなように改善できるオープンソースプロジェクトです。

bit

と簡単に反応コンポーネントを簡単に共有するFAQ

（よくある質問をここに追加する必要がありますが、コンテンツは元のドキュメントのFAQパーツと一致していますが、文言を少し調整してより自然で滑らかにすることができます。）

注：上記は、元のテキストに基づいた擬似オリジナルの作成であり、写真とその形式が保存されています。 実際の状況に応じて、「[ビット公式Webサイトリンク]」プレースホルダーを交換してください。

以上がアプリ間の反応コンポーネントをBITと共有する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。