糸のワークスペースにおける共有ライブラリ

導入

最近、私は糸のワークスペースを設定し、オーケストラのためにそれをDockerサポートを追加することについて書きました.

You can read it here

私は、我々が同様に図書館を含むためにこのセットアップを広げることができると思いました.共有ライブラリは、任意の組織ではかなり一般的ですので、我々のワークスペースに反応に基づいてコンポーネントライブラリを追加することになります.
我々のセットアップを越えるためにapps フォルダは、すべてのアプリケーションが住んでいる.私たちは2つのアプリを呼ばれるadmin and product . 我々は、このセットアップにコンポーネントライブラリを追加する予定であり、このライブラリは、我々のアプリの両方で使用されます.始めましょう.

ライブラリの追加

私は使用するつもりですVite 我々のビルドツールとして.これは、簡単にアプリケーションを足場にできる素敵なCLIを持っています.
VITEプロジェクトを作成するにはapps ディレクトリ

cd apps
yarn create vite lib --template react

我々lib フォルダは、現在これのように見えます

次のステップは、実行して依存関係を更新することですyarn install 我々のワークスペースのルートから.

ライブラリへのコンポーネントの追加

我々が開くならばsrc フォルダlib , ライブラリではなく、アプリケーションにとって理想的な設定であることがわかります.だから、我々はすべてのファイルを削除しますsrc and index.html そして、我々自身を加えてください.
まず、エントリファイルをindex.js インsrc . これは、私たちの束ねるプロセスの出発点ファイルです.
次に、フォルダを作成しますcomponents これは、すべてのコンポーネントを収容し、index.js ファイルも同様に.このインデックスファイルからすべてのコンポーネントをエクスポートします.
我々のプロジェクトは今のように見えるはずです.

ボタンコンポーネントの追加

すごい!ディレクトリのセットアップを釘付けにします.最後にコンポーネントを追加することができます.シンプルなボタンコンポーネントを追加できます.ディレクトリを作成しますButton インcomponents ディレクトリには3つのファイルが含まれます.Button.jsx , Button.css とindex.js .
これらのファイルの内容を加えましょうButton.jsx Button.css index.js
これはスタイリングや属性に重点を置いた非常に単純なコンポーネントです.このコンポーネントを好みに合わせてカスタマイズできます.
私達は私達から輸出されたコンポーネントを有するButton ディレクトリ.このコンポーネントをエクスポートする必要がありますcomponents ディレクトリも.このようにこのエクスポートを追加しますsrc/components/index.js
次のステップは、私たちのコンポーネントからエクスポートすることですsrc .src/index.js
これはすべての輸出を輸出しますcomponents ディレクトリ.より多くのコンポーネントを追加する場合、それらのすべてはここからエクスポートされます.
我々lib フォルダは次のようになります

VITE設定のfinetuning

アプリケーションでライブラリを使用する前に、変更する必要がありますvite.config.js これを知っているために、これは図書館で、1として束にされなければなりません.
このドキュメントは見つかりますhere
以下の設定を追加しますvite.config.js
また、我々のlibのものにいくつかのオプションを追加する必要がありますpackage.json .

The peerDependencies オプションは、バンドルに我々の最終的なバンドルにこれらの依存関係を加えないように指示します.
The main , module and exports アプリケーションのバンドルには、ファイルがどこにあるかを指定するオプションが必要ですumd and esm 形式
すごい!今すぐ我々のアプリでライブラリを使用して移動してみましょう.

アプリで私たちのライブラリを使用して

依存性としてローカルライブラリを追加する他の依存関係を追加するのと同じくらい簡単です.

yarn workspace admin add [email protected]

このコマンドはlib 依存関係としてadmin . 我々が同様にLibのバージョンに言及したという通知.このバージョンは、version プロパティpackage.json インlib .
別の方法は、単に追加することですlib: 0.1.0 エントリdependencies セクションpackage.json 管理者で.

テスト

我々は今、我々の立場にあるButton コンポーネントから.我々はそれを行いますApp.jsx 管理人admin/src/App.js
次の手順は、スクリプトを変更することですpackage.json アプリケーションを実行するときにライブラリがコンパイルされていることを確認します.
これを行うにはいくつかのスクリプトを追加しますpackage.json

すごい!もう少しで済んだ.唯一のことは私たちの管理アプリをチェックすることです.

yarn start:admin

我々が開くならばhttp://localhost:3000 我々のブラウザでは、我々は見ることができますButton として赤い色のコンポーネントtype プロップ

我々は、ワークスペース内の他のアプリケーションのライブラリを使用するには、同じプロセスを繰り返すことができます.

結論

すごい!我々は、2つのアプリケーションとコンポーネントライブラリの反応で糸のワークスペースを持っている.このアイデアを拡張して、このワークスペースに複数のライブラリを追加することもできます.

If you are interested in setting up a React-Typescrippt component library from scratch, check out my article here

このためのソースコードを見つけることができますhere
乾杯!